How to use the react-select.components.Option function in react-select

To help you get started, we’ve selected a few react-select examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Adslot / adslot-ui / src / components / Select / index.spec.jsx View on Github external
it('should have custom option background', () => {
    const wrapper = mount(
       value === 'jp'} menuIsOpen />
    );

    expect(wrapper.find('div.select-component__menu-list')).to.have.length(1);
    const options = wrapper.find('div.select-component__option');
    expect(options).to.have.length(4);
    options.at(0).prop('onClick')();
    options.at(1).prop('onMouseOver')();
    wrapper.update();
    expect(
      wrapper
        .find(components.Option)
        .at(0)
        .prop('isSelected')
    ).to.equal(true);
    expect(
      wrapper
        .find(components.Option)
        .at(1)
        .prop('isFocused')
    ).to.equal(true);
    expect(
      wrapper
        .find(components.Option)
        .at(2)
        .prop('isDisabled')
    ).to.equal(true);
  });
github Adslot / adslot-ui / src / components / Select / index.spec.jsx View on Github external
expect(wrapper.find('div.select-component__menu-list')).to.have.length(1);
    const options = wrapper.find('div.select-component__option');
    expect(options).to.have.length(4);
    options.at(0).prop('onClick')();
    options.at(1).prop('onMouseOver')();
    wrapper.update();
    expect(
      wrapper
        .find(components.Option)
        .at(0)
        .prop('isSelected')
    ).to.equal(true);
    expect(
      wrapper
        .find(components.Option)
        .at(1)
        .prop('isFocused')
    ).to.equal(true);
    expect(
      wrapper
        .find(components.Option)
        .at(2)
        .prop('isDisabled')
    ).to.equal(true);
  });
github technekes / cast-ui / src / Select / Select.component.tsx View on Github external
color: ${(props: Props) =>
      props.dropdownColor || props.theme.select.dropdownColor};
  }
`;

const SOption = styled.div`
  backgroundcolor: ${(props: Props) =>
    props.optionBackgroundColor || props.theme.select.optionBackgroundColor};
  &:hover {
    backgroundcolor: ${(props: Props) =>
      props.hoverOptionBackgroundColor ||
      props.theme.select.hoverOptionBackgroundColor};
  }
`;

const Option = styled(components.Option)``;

const IndicatorsContainer = styled(components.IndicatorsContainer)`
  & > div {
    padding-top: 0;
    padding-bottom: 0;
  }
`;

export class CustomSelect extends React.Component {
  static defaultProps = {
    selectSize: 'md',
    theme: Themes.defaultTheme,
    invalidText: '',
    id: uuid.v4(),
    option: {},
    closeMenuOnSelect: false,