@tractorzoom/virtualized-select v1.0.33
@tractorzoom/virtualized-select
React virtualized select element using react-window
Install
npm i --save @tractorzoom/virtualized-selectUsage
import React from 'react'
import VirtualizedSelect from '@tractorzoom/virtualized-select'
const MyComponent = () => (
<VirtualizedSelect
onChange={(selectedItem) => console.log('selectedItem: ', selectedItem)}
options={[{
label: 'Item 1',
value: 1,
}, {
label: 'Item 2',
value: 2,
}, {
label: 'Item 3',
value: 3,
}]}
/>
)
export default MyComponentVirtualized Select Props
| value | required | description |
|---|---|---|
| isDisabled | no | bool value that disables select element |
| isRequired | no | bool value that when enabled add red required border to select |
| onChange | yes | function called when selection changes |
| options | yes | list of options for select |
| placeholder | no | string to display inside select when no current selection; defaults to Select... |
| value | no | object that matches the Option object that is selected |
Option Props
| value | required | description |
|---|---|---|
| label | yes | string displayed in drop down |
| subtitle | no | string displayed as subtext in drop down |
| value | yes | identifier for option |
Contributing
We welcome improvements and fixes via PRs. Review the contributing guidelines below before getting started.
Code Style
We use Prettier with pre-commit hooks to format the majority of our code style preferences.
Committing
We use commitlint to ensure our commit messages are consistent and semantic. Commitlint is enable through a pre-commit hook with husky. For assistance with making commit messages that abide by our configuration, use npm run commit to step through the commitizen wizard to commit staged changes.
Storybook
We use Storybook to create our examples for our component. If you are adding or editing props to the VirtualizedSelect component, ensure that you have added or updated any stories effected to document the functionality of the component.
Testing
Using Jest for testing. Prefer the use of Jest Snapshots and react-test-renderer.
npm run test