New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-select-virtualized
Advanced tools
react-select-virtualized - npm Package Compare versions
Comparing version 2.3.6 to 2.3.7
| { | ||
| "name": "react-select-virtualized", | ||
| "version": "2.3.6", | ||
| "version": "2.3.7", | ||
| "description": "Select virtualized component using: react-select v3 + react-virtualized + react hooks", | ||
@@ -5,0 +5,0 @@ "author": "guiyep", |
@@ -51,21 +51,2 @@ # react-select-virtualized | ||
| ## Documentation - this are special to this library and none is required | ||
| <details> | ||
| <summary>Toggle</summary> | ||
| | Props | Type | Default | Description | | ||
| | -------------------------------------------- | ------------------------------------------ | ------- | ------------------------------------------------------------------------------------ | | ||
| | grouped | boolean | false | specify if options are grouped | | ||
| | formatGroupHeaderLabel | function({ label, options}) => component | | will render a custom component in the popup grouped header (only for grouped) | | ||
| | formatOptionLabel (coming from react-select) | function(option, { context }) => component | | will render a custom component in the label | | ||
| | optionHeight | number | 31 | height of each option | | ||
| | groupHeaderHeight | number | | header row height in the popover list | | ||
| | maxHeight (coming from react-select) | number | auto | max height popover list | | ||
| | defaultValue | option | | will set default value and set the component as an uncontrolled component | | ||
| | value | option | | will set the value and the component will be a controlled component | | ||
| | onCreateOption (Only for Creatable) | function(option) => nothing | | will be executed when a new option is created , it is only for controlled components | | ||
| </details> | ||
| # Examples | ||
@@ -109,3 +90,3 @@ | ||
| const Example1 = () => <Select options={options} grouped />; | ||
| const Example1 = () => <Select options={opsGroup} grouped />; | ||
| ``` | ||
@@ -133,5 +114,7 @@ | ||
| ##### Async - No Group | ||
| [](https://codesandbox.io/s/quirky-swanson-egeh8) | ||
| ##### Async - Grouped | ||
| [](https://codesandbox.io/s/runtime-cloud-jow57) | ||
@@ -155,2 +138,38 @@ | ||
| ## Custom Styles | ||
| For custom styling of the Input component read the `react-select` [documentation](https://react-select.com/home#custom-styles). | ||
| For styling the menu list and options, set the `menuIsOpen` prop to true, create an options list with less than 100 elements and use css for adjusting your css. | ||
| Use this example as a guidance | ||
| [](https://codesandbox.io/s/fragrant-thunder-bno6s) | ||
| <details> | ||
| <summary>Possible classes</summary> | ||
| `react-select-virtualized` `grouped-virtualized-list-item` `flat-virtualized-item` `fast-option` `fast-option` `fast-option-focused` `fast-option-selected` `fast-option-create` | ||
| </details> | ||
| ## Documentation - this are special to this library and none is required | ||
| <details> | ||
| <summary>Toggle</summary> | ||
| | Props | Type | Default | Description | | ||
| | -------------------------------------------- | ------------------------------------------ | ------- | ------------------------------------------------------------------------------------ | | ||
| | grouped | boolean | false | specify if options are grouped | | ||
| | formatGroupHeaderLabel | function({ label, options}) => component | | will render a custom component in the popup grouped header (only for grouped) | | ||
| | formatOptionLabel (coming from react-select) | function(option, { context }) => component | | will render a custom component in the label | | ||
| | optionHeight | number | 31 | height of each option | | ||
| | groupHeaderHeight | number | | header row height in the popover list | | ||
| | maxHeight (coming from react-select) | number | auto | max height popover list | | ||
| | defaultValue | option | | will set default value and set the component as an uncontrolled component | | ||
| | value | option | | will set the value and the component will be a controlled component | | ||
| | onCreateOption (Only for Creatable) | function(option) => nothing | | will be executed when a new option is created , it is only for controlled components | | ||
| </details> | ||
| ### Roadmap | ||
@@ -157,0 +176,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.16%
460926
- Number of lines in readme file
- increased by8.96%
231
No dependency changes