CODEWITHSUNDEEP
javascriptreactjsreact-select
MR.B
MR.B

Reputation: 55

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

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

Upvotes: 4

Views: 4027

Answers (1)

user6612182
user6612182

Reputation:

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

Upvotes: 16

Related Questions