React-Select : How to rotate dropdown indicator when menu open

Question

in example : https://codesandbox.io/s/jz33xx66q9?module=/example.js

i want to rotate emoji to up size down when menu open

how to do that

Answer 1

react-select provides a styling api which offers such customization. Each attribute in the object given to the styles prop is a function which is getting the current component state as a prop. The state also has props from the base component (Select).

<Select
    { ... }
    styles={{
        dropdownIndicator: (provided, state) => ({
            ...provided,
            transform: state.selectProps.menuIsOpen && 'rotate(180deg)'
        })
    }}
/>

CodeSandbox example