@gabrieljmj/react-selector

Custom select input for React with search field.

Install

npm install --save @gabrieljmj/react-selector

Preview

Click here to see a preview.

Usage

import { useState } from 'react'
import Selector from '@gabrieljmj/react-selector'
import '@gabrieljmj/react-selector/dist/index.css' // Include styles

export default function MyApp() {
  const [color, setColor] = useState(undefined);
  const options = [
    { value: 'red', label: 'Red' },
    { value: 'black', label: 'Black' },
    { value: 'green', label: 'Green' },
  ];

  const handleSubmit = (e) => {
      // ...
  };

  return (
    <form onSubmit={hanldeSubmit}>
        <Selector
          label="Pick a color"
          options={options}
          value={color}
          onChange={setColor}
          htmlInputAttributes={{
            name: 'color',
          }}
        />

        <button type="submit">Save</button>
    </form>
  );
}

Props

| Prop | Default value | Required | Type | Description | | ---- | ------------- | -------- | ---- | ----------- | | containerProps | empty object | false | object | Container element extra props. | | searchInputProps | empty object | false | object | Search input element extra properties. | | className | undefined | false | string | Class name for selector header. | | disabled | false | false | boolean | Disable selector | | fullWidth | false | false | boolean | Adds CSS property to ocupy 100% of parent element width | | htmlInputProps | empty object | false | object | Native hidden HTML select props. | | label | - | false |string | Selector label that appears when nothing is selected. | | noResultMessage | Search... | false | string | Message that shows up when nothing is returned from search | | onChange | - | false | function | On change value handler. Receives value as unique property. | | options | - | true | array | List of selector options. | | value | - | true | string | number | Selected value. "No value" is represented by undefined | | arrowIcons | { up: undefined, down: undefined } | false | object | Change arrow icons. Pass react nodes to up and down properties. | | strictComparison | true | false | boolean | Enables strict values comparison (===). Enabled by default. |

License

MIT © gabrieljmj