0.0.2 • Published 11 months 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/base
if 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 |