CODEWITHSUNDEEP
reactjsdrop-down-menureact-select
Guille Acosta
Guille Acosta

Reputation: 2222

How to change Dropdown Indicator position on react-select

Is it possible to change Dropdown Indicator to "float" on left (instead of right as default) on a React Select Component?

I was checking Dropdown Indicator props on its API but no clues at the moment..

Upvotes: 2

Views: 3463

Answers (2)

Brattamob
Brattamob

Reputation: 43

There is an isRtl prop for this:

<Select<OptionType>
    isRtl
    options={options: OptionType[]}
/>

you can find it on their prop documentation

Upvotes: 1

NearHuscarl
NearHuscarl

Reputation: 81723

You can move the dropdown indicator to the left by reversing the row order since the container is using flex

const customStyles = {
  control: (base) => ({
    ...base,
    flexDirection: "row-reverse"
  })
};

<Select
  styles={customStyles}
  options={options}
/>

Live Demo

Edit 64255002/how-to-change-dropdown-indicator-position-on-react-select

Upvotes: 6

Related Questions