Skip to content

Custom select input for React with search field.

License

Notifications You must be signed in to change notification settings

gabrieljmj/react-selector

Repository files navigation

Custom select input for React with search field.

NPM JavaScript Style Guide GitHub

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

About

Custom select input for React with search field.

Resources

License

Stars

Watchers

Forks

Packages

No packages published