React Select Menu

Simple Select Menu working with React

• Installation
• Usage/Examples
• Report a bug
• Request a feature
• Data Formats
  • Option
  • Group
• Props
  • Examples

Installation

Install react-select-menu with npm

npm i @fsmnk/react-select-menu

Back to top

Report a bug

Report a bug : here

Back to top

Request a feature

Request a feature : here

Back to top

Usage/Examples

import Select from '@fsmnk/react-select-menu';

function App() {
  const options = [
    { value: 'Option 0' },
    { value: 'Option 1' },
    { value: 'Option 2' },
    {
      label: 'Group 1',
      options: [
        { value: 'Option 3' },
        { value: 'Option 4' },
        { value: 'Option 5' },
      ],
    },
  ];

  return (
    <div className="App">
      <Select id="id" options={options} />
    </div>
  );
}

Back to top

Option format

{
  value: string; // required
  isDisabled: boolean; // optional
  isVisible: boolean; // optional
}

Back to top

Group format

{
  label: string; // required
  options: Option[]; // optional
}

Back to top

Props

| Name | Required | Default | Type | Example | | ------------- | -------- | --------- | -------- | ----------------------- | | id | yes | undefined | string | Click | | options | yes | undefined | Array | Click | | className | no | '' | string | Click | | style | no | undefined | Object | Click | | defaultValue | no | undefined | string | Click | | placeholder | no | undefined | string | Click | | label | no | undefined | string | Click | | zIndex | no | 1 | number | Click | | offset | no | undefined | Object | Click | | isDisabled | no | false | boolean | Click | | isClearable | no | false | boolean | Click | | isSearchable | no | false | boolean | Click | | isForcedOpen | no | false | boolean | Click | | isRequired | no | false | boolean | Click | | closeOnSelect | no | true | boolean | Click | | onChange | no | undefined | function | Click | | onClose | no | undefined | function | Click | | onCreate | no | undefined | function | Click | | onFocus | no | undefined | function | Click | | onOpen | no | undefined | function | Click | | onSelect | no | undefined | function | Click |

Back to top

Props Examples

id

id is used to add a unique id to link label to the input

<Select id="example-id" options={options} />

Back to top

options

options is an Array of Object, used to generate the list in the Select-Menu

const options = [
  { value: 'Option 0' },
  { value: 'Option 1' },
  { value: 'Option 2' },
];

<Select id="id" options={options} />;

Back to top

className

className simply add classes to the component

<Select id="id" options={options} className="class1 class2 class3" />

Back to top

style

style is used to add custom style to components

const customStyle = {
  select: {
    backgroundColor: 'red',
  }, // optional
  input: {
    padding: '1rem',
  }, // optional
  menu: {
    color: 'blue',
  }, // optional
  list: {
    backgroundColor: 'green',
  }, // optional
  item: {
    color: 'purple',
  }, // optional
};

<Select id="id" options={options} style={customStyle} />;

Back to top

defaultValue

defaultValue is the default value of the input (when component created)

const options = [
  { value: 'Option 0' },
  { value: 'Option 1' },
  { value: 'Option 2' },
];

<Select id="id" options={options} defaultValue={options[0].value} />;

Back to top

placeholder

placeholder is the placeholder of the input

<Select id="id" options={options} placeholder="Placeholder example" />

Back to top

label

label of the input, linked with the id prop

<Select id="id" options={options} label="Label example" />

Back to top

offset

offset is the X (left) & Y (top) placement of the menu from the input

const customOffset = {
    top: 50, // in px
    left: 100, // in px
}

<Select id="id" options={options} offset={customOffset} />

Back to top

zIndex

zIndex is the z-index of the component

<Select id="id" options={options} zIndex={10} />

Back to top

isDisabled

isDisabled disable or not the input

<Select id="id" options={options} isDisabled />

Back to top

isClearable

isClearable add the possibility to clear the input value (icon appear when input value isn't null)

<Select id="id" options={options} isClearable />

Back to top

isSearchable

isSearchable add the possibility to search for option from input value

<Select id="id" options={options} isSearchable />

Back to top

isForcedOpen

isForcedOpen tell that the menu is always open

<Select id="id" options={options} isForcedOpen />

Back to top

isRequired

isRequired tell that the input value is required

<Select id="id" options={options} isRequired />

Back to top

closeOnSelect

closeOnSelect tell that the menu is closed or not when an item is selected

<Select id="id" options={options} closeOnSelect={false} />

Back to top

onChange

onChange trigger when input value change

<Select id="id" options={options} onChange={() => console.log('onChange')} />

Back to top

onClose

onClose trigger when menu is closed

<Select id="id" options={options} onClose={() => console.log('onClose')} />

Back to top

onCreate

onCreate trigger when component is create

<Select id="id" options={options} onCreate={() => console.log('onCreate')} />

Back to top

onFocus

onFocus trigger when input is focused

<Select id="id" options={options} onFocus={() => console.log('onFocus')} />

Back to top

onOpen

onOpen trigger when menu is opened

<Select id="id" options={options} onOpen={() => console.log('onOpen')} />

Back to top

onSelect

onSelect trigger when option is selected

<Select id="id" options={options} onSelect={() => console.log('onSelect')} />

Back to top