react-select + allOption

If you are using the React library react-select, you will find it doesn’t implement a “select all” option. It’s not difficult to implement this feature by yourself, just have a look at the following gist. You will even find how to make a localization wrapper on top of your control, in case you need it.

Take a look at the relevant stuff:

// specify props.allowSelectAll = true to enable!
const Select = props => {
  if (props.allowSelectAll) {
    if (props.value.length === props.options.length) {
      return (
        <ReactSelect
          {...props}
          value={[props.allOption]}
          onChange={selected => props.onChange(selected.slice(1))}
        />
      );
    }

    return (
      <ReactSelect
        {...props}
        options={[props.allOption, ...props.options]}
        onChange={selected => {
          if (
            selected.length > 0 &&
            selected[selected.length - 1].value === props.allOption.value
          ) {
            return props.onChange(props.options);
          }
          return props.onChange(selected);
        }}
      />
    );
  }

  return <ReactSelect {...props} />;
};

You will find the full gist at:

https://gist.github.com/AlexEscalante/251032be95767366742fce75bdfa269b

Please drop a line if you find this useful or have any comment!

Blog

react-select + allOption

Alex Escalante

Join Our Newsletter. No Spam, Only the good stuff.

Related