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