react-basic-select

Just another select component for React. Created for Autarkis.

Demo

Why?

Because I needed a small, mostly dependency-free Select component for my project. Figured people may use it as well.

CSS?

You can find an example CSS implementation in dist/example.css, which lists all classes used in this package.

Installation

npm install react-basic-select

Basic Usage

const options = ["Option 1", "Option 2", "Option 3"];

<Select	options=[options]/>

Props

| prop | type | default | description | | ---------------------- | --------------------------------- | ----------- | -------------------------------------------------------- | | options | string[] \| Option[] \| Group[] | n/a | Array of either string, or Option or Group objects | | multi? | boolean | undefined | Allow multiple selections | | search? | boolean | undefined | Allow option search via input value | | disabled? | boolean | undefined | Close option dropdown after selecting an option | | closeOnSelect? | boolean | undefined | Close option dropdown after selecting an option | | appendGroupValue? | boolean | undefined | Prepends the group.value to option.value | | showAsText? | boolean | undefined | Shows the selected options as a string | | create? | boolean | undefined | Allow user created options | | createString? | string | "Create:" | Prefix text for user created option | | placeholder? | string | undefined | Placeholder text for input | | defaultSelected? | string[] \| Option[] \| Group[] | undefined | Selects value(s) when the Select element is rendered | | searchSensitivity? | number (0.0 to 1.0) | undefined | Search matching sensitivity | | onOptionSelect? | (value: Option) => void | undefined | Option Select callback | | onSelectedChange? | (values: Option[]) => void | undefined | Selected value(s) callback | | onInputChange? | (values: string) => void | undefined | Input value callback |

Prop Considerations

• If both search and create are false, instead of an input, you get a div to display the options list.
• onOptionSelect calls the given callback before the value is processed, and onSelectedChange calls its callback afterwards.
• onInputChange callback is only called if you have either search or create, or both. It is called after all the filtering and such is done.
• If showAsText is set, users won't be able to remove selected options via clicking on them.

Options Types

cosnt stringArray = ["Option 1", "Option 2"]

cosnt optionArray = [
  { name: "Option 1", value: "option_1" },
  { name: "Option 2", value: "option_2" }
]

cosnt groupArray = [
  { name: "Group 1", value: "group_1"
    options: [
      { name: "Option 1", value: "option_1" },
      { name: "Option 2", value: "option_2" }
    ]
  },
  { name: "Group 2", value: "group_2"
    options: [
      { name: "Option 3", value: "option_3" },
      { name: "Option 4", value: "option_4" }
    ]
  },
]