Skip to content

floriansimunek/react-select-menu

Repository files navigation

React Select Menu

Simple Select Menu working with React

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