# @congritta-ui/select

> Select component for Congritta UI framework

Latest version **0.0.2** (published 2023-06-22) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @congritta-ui/select
pnpm add @congritta-ui/select
yarn add @congritta-ui/select
bun add @congritta-ui/select
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-06-22 |
| First published | 2023-06-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 36 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Congritta |
| Maintainers | congritta |
| Keywords | ui, styles, css, framework, frontend, congritta, component, select, dropdown, menu |

## Links

- npm: https://www.npmjs.com/package/@congritta-ui/select
- Repository: https://github.com/congritta/ui-select
- Homepage: https://ui.congritta.com/docs/select
- Issues: https://github.com/congritta/ui-select/issues
- npm.io page: https://npm.io/package/@congritta-ui/select

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.7
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.4

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2023-06-22
- 0.0.1 — 2023-06-15

## README

# @congritta-ui/select

This is 'select' React component and part of [Congritta UI](https://ui.congritta.com)

## How to install

1. Install `@congritta-ui/base` if you didn't it yet. (More info at: http://ui.congritta.com/docs/base);
2. Install `@congritta-ui/select`;

Add

```javascript
import Select from '@congritta-ui/select';
```

into your code

## How to use

Example:

```jsx
export default function MyComponentWidthSelect() {
  const [value, setValue] = useState('a');

  return (
    <Select value={value} onChange={setValue} options={[
      {value: 'a', element: 'Item A'},
      {value: 'b', element: 'Item B'},
      {value: 'c', element: 'Item C'},
      {value: 'd', element: 'Item D'},
      {value: 'e', element: 'Item E'},
      {value: 'f', element: 'Item F'},
    ]} />
  )
}
```

### Props

| Prop name                           | Description                                                                                                                                                          | Is Required | Default value                 |
|-------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|-------------------------------|
| value                               | Active value                                                                                                                                                         | true        |                               |
| options                             | Array of objects. `value` propetry is unique value key (like value in regular HTML), `element` property is a string or JSX component that is visible in options list | true        |                               |
| onChange                            | Function that executes when user select an option in options list                                                                                                    | true        |                               |
| transitionDuration                  | Duration in milliseconds to reveal or close options list                                                                                                             | false       | `210`                         |
| optionHeight                        | Height of an option in options list (in pixels)                                                                                                                      | false       | `35`                          |
| gapBetweenSelectedOptionAndList     | Gap between selected option and options list (in pixels)                                                                                                             | false       | `10`                          |
| wrapperClassName                    | Class name for Select component wrapper for adding additional styles                                                                                                 | false       |                               |
| selectedOptionClassName             | Class name for selected option for adding additional styles                                                                                                          | false       |                               |
| wrapperClassName                    | Class name for Select component wrapper for adding additional styles                                                                                                 | false       |                               |
| optionsListClassName                | Class name for options list for adding additional styles                                                                                                             | false       |                               |
| notchIcon                           | SVG Element about arrow icon at the right                                                                                                                            | false       |                               |

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