Rotate arrow indicator in React-select v2

Question

I\'m using React Select v2 in my project with Styled Components and I need to be able to turn the arrow indicator upside down when the menu is open, which was supported in v1.

Answer 1

So, based on Laura's response, my solution was to use the onMenuClose and onMenuOpen to set the state of a property in my styled component.

const indicatorStyle = (props: StyledSelectProps & DropdownProps<{}>) => css`
  & .react-select__indicators {
      & .react-select__dropdown-indicator {
        transition: all .2s ease;
        transform: ${props.isOpen && "rotate(180deg)"};
      }
    }
`;

This function is called inside of my styled component's css.

And then in the component I call my styled component, I control the state:

export class Dropdown extends React.Component> {
  public state = { isOpen: false };

  private onMenuOpen = () => this.setState({ isOpen: true });
  private onMenuClose = () => this.setState({ isOpen: false });

  public render() {
    const { ...props } = this.props;
    const { isOpen } = this.state;
    return (
      
    );
  }
}

A bit convoluted but it works for now.