@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
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