# @gabrieljmj/react-selector

> React selector component

Latest version **1.1.3** (published 2023-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gabrieljmj/react-selector
pnpm add @gabrieljmj/react-selector
yarn add @gabrieljmj/react-selector
bun add @gabrieljmj/react-selector
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-03-06 |
| First published | 2021-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 44.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | gabrieljmj |
| Maintainers | gabrieljmj |

## Links

- npm: https://www.npmjs.com/package/@gabrieljmj/react-selector
- Repository: https://github.com/gabrieljmj/react-selector
- Homepage: https://github.com/gabrieljmj/react-selector#readme
- Issues: https://github.com/gabrieljmj/react-selector/issues
- npm.io page: https://npm.io/package/@gabrieljmj/react-selector

## Recent versions

- 1.1.3 (latest) — 2023-03-06
- 1.1.1 — 2022-01-07
- 1.1.0 — 2021-08-23
- 1.0.1 — 2021-06-07
- 1.0.0 — 2021-06-07

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

---
_Source: https://npm.io/package/@gabrieljmj/react-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._