artof-select v2.1.0

artof-select

A simple, but powerful React Select component. Can be used for both Select Single React form element and Select Multiple React form element.

Key features:

• Based on native HTMLSelectElement props and methods
• Supports multiple selection
• Supports searching through options list
• Fully customisable design
• Select provides display of hints and error notifications
• Multiple selected options can be shown as [tag] [tag] [tag]
• Supports native keyboard events, like Tab, Arrow Up | Down to navigate over the dropdown options and Enter (or even Spacebar) to apply selected option(s).
• Supports custom React.ReactNode component as option element

In addition, this component works with @floating-ui/react-dom to make better dropdown positioning.

Demo Storybook here

Installation and usage

npm i artof-select

or

yarn add artof-select

As soon as it installed, you can easily use Select in your app:

import { Select } from 'artof-select';

// custom
import 'artof-select/dist/index.scss';

const App = () => {
  const [value, setValue] = useState();

  const handleChange = (event) => {
    setValue(event.currentTarget.value);
  }

  return (
    <Select
      label="Some label"
      value={value}
      options={[]}
      onChange={handleChange}
      allowSearch={true}
    />
  )
}

Props

Common props you may want to specify include:

Also, the onChange prop can return event: React.ChangeEvent<HTMLSelectElement> or values: string[] depend on multiple option.

In addition to above props, you can get access to the Select component with ref. This will allow you to force some events, like: selectRef.current?.focus()

Run the Demo from local

You can check out the demo:

git clone https://github.com/o-mega/artof-select.git
cd artof-select
npm install
npm run dev

This commands should run the Storybook with designed examples at http://localhost:6006

License

MIT Licensed. Copyright (c) Oleg Frolov