React-select
Apply SGDS styles to react-select library for a more cohesive look within SGDS-based projects.
Installation
Install the following packages via npm:
$ npm i @govtechsg/sgds bootstrap-icons react-select
Usage
React-Select
Tested against: react-select@^5.4.0
To integrate sgds styles into your React application with react-select components, follow these steps:
- Create a css file with the following contents
/** sgds-x-react-select.css */
.sgds-x-react-select-container .sgds-x-react-select__control {
border: 1px solid #98a2b3;
}
.sgds-x-react-select-container .sgds-x-react-select__control--is-focused {
box-shadow: none;
}
.sgds-x-react-select__menu .sgds-x-react-select__option--is-focused {
background-color: var(--sgds-gray-200);
}
.sgds-x-react-select__menu .sgds-x-react-select__option--is-selected {
background-color: var(--sgds-primary);
}
.sgds-x-react-select__menu .sgds-x-react-select__option:active {
background-color: var(--sgds-gray-300);
}
.sgds-x-react-select__value-container .sgds-x-react-select__multi-value {
background-color: var(--sgds-primary);
color: var(--sgds-white);
}
.sgds-x-react-select__multi-value .sgds-x-react-select__multi-value__label {
color: var(--sgds-white);
}
.sgds-x-react-select__multi-value
.sgds-x-react-select__multi-value__remove:hover {
background-color: var(--sgds-primary);
color: var(--sgds-white);
}
- Import the
Selectcomponent fromreact-selectalong with the required styles:
import Select, { components } from "react-select";
import "@govtechsg/sgds/css/sgds.css";
import "./sgds-x-react-select.css";
import "bootstrap-icons/font/bootstrap-icons.css";
- Utilize the provided Select component within your application, ensuring the use of specific class names for SGDS styles:
const OPTIONS = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
const DropdownIndicator = (props) => {
return (
<components.DropdownIndicator {...props}>
<i className="bi bi-search form-control-icon"></i>
</components.DropdownIndicator>
);
};
const App = () => {
return (
<Select
components=
className="sgds-x-react-select-container"
classNamePrefix="sgds-x-react-select"
options={OPTIONS}
// Other react-select props
/>
);
};
export default App;
Note: Ensure that the className prop is set to "sgds-x-react-select-container" and classNamePrefix prop is set to "sgds-x-react-select" for your Select component to acquire the SGDS styling. Following these exact class names is essential to apply the SGDS styles correctly.
Last updated 04 June 2024
