0.0.2 • Published 11 months ago

@congritta-ui/select v0.0.2

Weekly downloads
-
License
-
Repository
github
Last release
11 months ago

@congritta-ui/select

This is 'select' React component and part of Congritta UI

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

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 nameDescriptionIs RequiredDefault value
valueActive valuetrue
optionsArray 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 listtrue
onChangeFunction that executes when user select an option in options listtrue
transitionDurationDuration in milliseconds to reveal or close options listfalse210
optionHeightHeight of an option in options list (in pixels)false35
gapBetweenSelectedOptionAndListGap between selected option and options list (in pixels)false10
wrapperClassNameClass name for Select component wrapper for adding additional stylesfalse
selectedOptionClassNameClass name for selected option for adding additional stylesfalse
wrapperClassNameClass name for Select component wrapper for adding additional stylesfalse
optionsListClassNameClass name for options list for adding additional stylesfalse
notchIconSVG Element about arrow icon at the rightfalse