react-dropdown-z
Version:
React hook. Simple dropdown. (Lib)
176 lines (146 loc) • 7.84 kB
Markdown
<div align="center">
<h1>react-dropdown-z</h1>
<a href="https://github.com/delpikye-v/react-dropdown">react-dropdown-z</a>
<br />
<br />
<b><a href="https://codesandbox.io/s/jsvnj1">LIVE EXAMPLE</a></b>
</div>
<br />
[](https://www.npmjs.com/package/react-dropdown-z)
[](https://standardjs.com)
---
#### Description
+ Simple, quick dropdown (group) for react.
+ Append perfect scrollbar. (if need)
+ Support show top, hide.
+ Fit to window size if exceeding the height beyond the window.
+ Auto change show top or bottom. (if need).
+ Add tooltip if-need [rc-tc-ifn](https://www.npmjs.com/package/rc-tc-ifn)
+ If you want more, please use [react-select](https://github.com/JedWatson/react-select).
---
#### Usage
Install the package
```js
npm i react-dropdown-z
```
Import the module in the place you want to use:
```js
import "react-dropdown-z/build/styles.css";
import Dropdown from "react-dropdown-z";
```
#### Snippet
```js
const [value, setValue] = React.useState();
// flat options
const options = [ "o1", "tw2", "th3", "f4" ];
<Dropdown
// placeholder="Abcd"
options={options}
width="200px"
enablePerfectScroll // if need
// dropdownHeight="100px" // fit with window
value={value}
handleSelection={setValue}
showAbove
/>
```
<br />
```js
// Object array
// keyName and labelName
const options2 = [
{ dsds: 'dsd' }, // => please set key and value => display json
{
val: 0,
text: 'this one',
},
{
val: 2,
text: 'this one 2',
},
{
val: 3,
text: 'this one 3',
className: 'class-3'
},
{
val: 10,
text: 'this one 10 this is option tooltip abcd xyz',
disabled: true
},
// group
{
isGroup: true,
groupName: 'group a',
className: 'groupclass'
items: [
{
val: 4,
text: 'this one 4',
},
],
},
]
<Dropdown
// placeholder="Abcd"
keyName="val" // only set when array option is object
labelName="text" // only set when array option is object
options={options2}
width="200px"
value={value}
handleSelection={setValue}
// resizeClose={false}
showAbove
tooltipIfLabelProps={{
placement: 'right',
width: '100%',
}}
tooltipIfDropdownProps={{
placement: 'right',
width: '100%',
}}
/>
```
---
#### props
| Prop Name | Type | Description |
|--------------------------|-------------------------------------------------------|------------------------------------------------------------------|
| `className` | `string` | Custom class for the root container. |
| `arrowClassName` | `string` | Custom class for the dropdown arrow. |
| `groupItemClassName` | `string` | Custom class for grouped items. |
| `dropdownClassName` | `string` | Custom class for the dropdown list container. |
| `placeholderClassName` | `string` | Custom class for the placeholder. |
| `showAbove` | `boolean` | Whether the dropdown should appear above the trigger. |
| `options` | `IFGroupData[] \| any[]` | Array of selectable options. |
| `keyName` | `string` | Key name used to extract the value from an option object. |
| `labelName` | `string` | Key name used to extract the label from an option object. |
| `value` | `string \| number \| null` | Currently selected value. |
| `customizeArrow` | `string \| React.ReactNode` | Custom arrow icon/component. |
| `placeholder` | `string` | Placeholder text when no value is selected. |
| `noDataText` | `string` | Text to display when `options` is empty. |
| `width` | `string \| number` | Width of the dropdown component. |
| `height` | `string \| number` | Height of the select box (not the dropdown). |
| `fullWidth` | `boolean` | If `true`, makes the component stretch to 100% width. |
| `enablePerfectScroll` | `boolean` | Enables perfect-scrollbar integration for dropdown scrolling. |
| `tabIndex` | `number` | Sets tab index for accessibility. |
| `disabled` | `boolean` | Disables the dropdown when `true`. |
| `dropdownHeight` | `string \| number` | Explicit height for the dropdown list. |
| `fitToWindowHeight` | `boolean` | Dropdown resizes to fit within visible window area. |
| `autoAdjustDirection` | `boolean` | Automatically flips dropdown direction based on available space. |
| `preserveScrollPosition` | `boolean` | Retains scroll position in dropdown between opens. |
| `closeOnResize` | `boolean` | Closes dropdown when window is resized. |
| `closeOnEscape` | `boolean` | Closes dropdown when `Escape` is pressed. |
| `closeOnOutside` | `boolean` | Closes when clicking outside the dropdown. |
| `tooltipIfLabelProps` | `IFTooltipLabelProps` | Tooltip props for the label. |
| `tooltipIfDropdownProps` | `IFTooltipDropdownProps` | Tooltip props for the dropdown content. |
| `handleSelection` | `(value: string \| number \| null, selectItem?: any) => any` | Callback when an option is selected. |
<br />
#### Note
tooltipIfProps: react-tooltip-z / rc-tc-ifn
<br />
#### RUN
<b><a href="https://codesandbox.io/s/jsvnj1">LIVE EXAMPLE</a></b>
<br />
#### License
MIT