React-basic-select NPM

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" }
    ]
  },
]