select checkbox (say select all or item checkbox)

[BasirBaidya]

Hi, I couldn't find any option to show checkbox besides menu options. How can I show this in control?

[ebonow]

Greetings @BasirBaidya ,

Do you have an example or mockup to better describe what you are looking to implement?

[ebonow]

Greetings @BasirBaidya

The source code for the documentation page for this is here:
https://github.com/JedWatson/react-select/blob/react-select%404.3.0/docs/pages/upgradeGuide/props.js

This is the relevant source code:

// Custom Option Component
class InputOption extends Component<*, *> {
  state = { isActive: false };
  onMouseDown = () => this.setState({ isActive: true });
  onMouseUp = () => this.setState({ isActive: false });
  onMouseLeave = () => this.setState({ isActive: false });

  render() {
    const {
      getStyles,
      Icon,
      isDisabled,
      isFocused,
      isSelected,
      children,
      innerProps,
      ...rest
    } = this.props;
    const { isActive } = this.state;

    // styles
    let bg = 'transparent';
    if (isFocused) bg = '#eee';
    if (isActive) bg = '#B2D4FF';

    const style = {
      alignItems: 'center',
      backgroundColor: bg,
      color: 'inherit',
      display: 'flex ',
    };

    // prop assignment
    const props = {
      ...innerProps,
      onMouseDown: this.onMouseDown,
      onMouseUp: this.onMouseUp,
      onMouseLeave: this.onMouseLeave,
      style,
    };

    return (
      <components.Option
        {...rest}
        isDisabled={isDisabled}
        isFocused={isFocused}
        isSelected={isSelected}
        getStyles={getStyles}
        innerProps={props}
      >
        <input type="checkbox" checked={isSelected} />
        {children}
      </components.Option>
    );
  }
}

//  Options for the Select
const allOptions = [
  { value: 'removed', label: 'removed' },
  { value: 'unchanged', label: 'unchanged' },
  { value: 'renamed', label: 'renamed' },
];

// Select with appropriate props
class PropChanges extends Component<
  *,
  { selectedOptions: Array<string>, filterValue: string }
> {
  state = {
    selectedOptions: (allOptions.map(opt => opt.value): Array<string>),
    filterValue: filterOptions[0].value,
  };

  render() {
    let { selectedOptions, filterValue } = this.state;

   return (
       <Select
          defaultValue={allOptions}
          isMulti
          closeMenuOnSelect={false}
          hideSelectedOptions={false}
          onChange={options => {
            if (Array.isArray(options)) {
              this.setState({ selectedOptions: options.map(opt => opt.value) });
            }
          }}
          options={allOptions}
          components={{
            Option: InputOption,
          }}
        />
     )
   }
}