React Select Custom Style

The React Select library is one of the popular choices for developers to create customizable dropdown components. In this article, we will discuss how to create a style or custom style in React Select to create an appearance that suits the theme and UI design of the application.

Why Choose React Select?
React Select makes it easy to implement flexible dropdowns with features like search, multiple selection, and customizable options. However, the default appearance may not always suit design needs, so we need to add custom styling so that the dropdown blends with the appearance of the application.

Using React Select in Projects
To use React Select, first install its dependencies:

npm install react-select

Then, import it into the component and create a basic dropdown:

import Select from 'react-select';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

function MySelect() {
  return <Select options={options} />;
}

Custom Style

Custom Component React Select
create 1 new file, and fill it with the following script

import Select from 'react-select'

const CustomSelectComponent = ({ onChange, options, value, placeholder }: any) => {

    const defaultValue = (options: any, value: any) => {
        return options ? options.find((option: any) => option.value === value) : ''
    }

    const customStyles = {
        option: (provided: any, state: { isSelected: any }) => ({
            ...provided,
            color: state.isSelected ? '#AB0202' : '#000000',
            background: state.isSelected ? '#F4F7F9' : '#FFFFFF',
            opacity: 1,
            '&:hover': {
                backgroundColor: '#FCC2C2',
                cursor: 'pointer',
            },
        }),
        menuPortal: (base: any) => ({ ...base, zIndex: 9999 }),
        control: (base: any, state: any) => ({
            ...base,
            background: '#F7F7F7',
            borderColor: '#C0C4D6',
            '&:hover': {
                borderColor: state.isFocused ? '#F7F7F7' : 'blue',
                cursor: 'pointer',
            },
        }),
        singleValue: (provided: any, state: { isDisabled: any }) => {
            const opacity = state.isDisabled ? 1 : 1
            const transition = 'opacity 300ms'

            return { ...provided, opacity, transition }
        },
    }

    return (
        <Select
            value={defaultValue(options, value)}
            onChange={(value) => onChange(value)}
            options={options}
            placeholder={placeholder}
            styles={customStyles}
            menuPortalTarget={document.body}
        />
    )
}

export default CustomSelectComponent

The function of each prop in the component above

• onChange is a callback function that is executed every time a change occurs to the dropdown options.

• options is an array of objects that represent the options available in the dropdown.

• value is the currently selected value from the dropdown. This property is used to set which option is currently selected in the dropdown.

• placeholder is text that is displayed as a user guide before an option is selected. This text will be displayed in the dropdown as a guide to selecting an option.

2.How to use CustomSelectComponent

here's how to use it

import CustomSelectComponent from './SelectComponent'

const App = () => {

    const [value, setValue] = useState('')
    const options = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
    ];

    return (
        <>
            <CustomSelectComponent
                placeholder={'Category'}
                value={value}
                options={options}
                onChange={(value: any) => {
                    setValue(value.value)
                }}
            />
        </>)
}

export { App }

The above is the detailed content of React Select Custom Style. For more information, please follow other related articles on the PHP Chinese website!