https://github.com/gabrieljmj/react-selector

Custom select input for React with search field.
https://github.com/gabrieljmj/react-selector

Last synced: about 2 months ago
JSON representation

Custom select input for React with search field.

• Host: GitHub
• URL: https://github.com/gabrieljmj/react-selector
• Owner: gabrieljmj
• License: mit
• Created: 2021-06-04T12:59:24.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T07:25:48.000Z (over 1 year ago)
• Last Synced: 2024-04-29T12:20:59.525Z (9 months ago)
• Language: TypeScript
• Homepage:
• Size: 247 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [@gabrieljmj/react-selector](https://www.npmjs.com/package/@gabrieljmj/react-selector)

Custom select input for React with search field.

[![NPM](https://img.shields.io/npm/v/@gabrieljmj/react-selector.svg?style=flat-square)](https://www.npmjs.com/package/@gabrieljmj/react-selector) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com) ![GitHub](https://img.shields.io/github/license/gabrieljmj/react-selector?style=flat-square)

## Install

```bash

npm install --save @gabrieljmj/react-selector

```

## Preview

[Click here](https://codesandbox.io/s/billowing-rain-vp4gw?file=/src/App.js:99-141) to see a preview.

## Usage

```jsx

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 (

    

        

        Save

    

  );

}

```

## 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](https://github.com/gabrieljmj)