0.0.2 • Published 3 years ago
@congritta-ui/select v0.0.2
@congritta-ui/select
This is 'select' React component and part of Congritta UI
How to install
- Install
@congritta-ui/baseif you didn't it yet. (More info at: http://ui.congritta.com/docs/base); - Install
@congritta-ui/select;
Add
import Select from '@congritta-ui/select';into your code
How to use
Example:
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 |