https://github.com/opuscapita/react-dropdown
React dropdown component
https://github.com/opuscapita/react-dropdown
cashmanagement react
Last synced: 7 months ago
JSON representation
React dropdown component
- Host: GitHub
- URL: https://github.com/opuscapita/react-dropdown
- Owner: OpusCapita
- License: mit
- Created: 2018-02-05T13:16:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T04:53:58.000Z (almost 3 years ago)
- Last Synced: 2025-02-25T23:04:55.610Z (7 months ago)
- Topics: cashmanagement, react
- Language: JavaScript
- Homepage:
- Size: 9.6 MB
- Stars: 0
- Watchers: 6
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dropdown
### Description
Describe the component here
### Installation
```
npm install @opuscapita/react-dropdown
```
### Demo
View the [DEMO](https://opuscapita.github.io/react-dropdown)
### Builds
#### UMD
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
#### CommonJS/ES Module
You need to configure your module loader to use `cjs` or `es` fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
* With webpack use [resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolve-mainfields) to configure the module type.
* Add [SASS loader](https://github.com/webpack-contrib/sass-loader) to support importing of SASS styles.
### API
#### DropdownContainer
| Prop name | Type | Default | Description |
| ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- |
| id | number or string | required | Unique HTML id attribute |
| title | number, string or element | required | Title of the dropdown |
| children | string, element or array | | Content of the dropdown |
| disabled | boolean | false | Is dropdown disabled or not |
| dropup | boolean | false | Is dropup or dropdown |
| isOpen | boolean | false | Is dropdown open by default |
| noCaret | boolean | false | If false, caret is show |
| onToggle | function | empty function | Callback function for toggle |
| pullRight | boolean | false | If false, dropdown is aligned on left, otherwise on right |
| style | object | { bsSize: 'xs', bsStyle: 'info' } | Custom style for the dropdown |
| useAnchor | boolean | false | If true, title is anchor |
#### DropdownMenu
| Prop name | Type | Default | Description |
| ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- |
| id | number or string | required | Unique HTML id attribute |
| menuItems | array of menu items | required | List of the dropdown menu items |
| caret | boolean | false | If true, caret is show |
| disabled | boolean | false | Is dropdown disabled or not |
| dropup | boolean | false | Is dropup or dropdown |
| pullLeft | boolean | false | If false, dropdown is aligned on right, otherwise on left |
| title | number, string or element | | Title of the dropdown |
#### DropdownMenu - `menuItems` prop attributes
| Prop name | Type | Default | Description |
| ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- |
| disabled | boolean | | Is dropdown menu item disabled |
| disableClosing | boolean | | Is dropdown menu item's closing disabled |
| href | string | | Hyperlink of the dropdown menu item |
| icon | element | | Icon of the dropdown menu item |
| id | number or string | | Unique HTML id attribute |
| onClick | function | | Callback function of click |
| title | number, string or element | | Title of the dropdown menu item |
| type | string | | Enumeration either 'item' or 'divider' |
#### DropdownMultiSelect
| Prop name | Type | Default | Description |
| ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- |
| id | number or string | required | Unique HTML id attribute |
| isClearable | boolean | true | If false, selection cannot be empty |
| items | array of items | required | Dropdown menu items |
| checkedItems | List | empty list | Checked items |
| defaultPlaceholder | string | '{N} items selected' | Default placeholder |
| onChange | function | empty function | Callback function of checked change |
| tabIndex | number or string | 1 | tabIndex attribute |
#### DropdownMultiSelect - `items` prop attributes
| Prop name | Type | Default | Description |
| ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- |
| label | string | | Label of the dropdown menu item |
| labelPlaceholder | string | | Placeholder of the dropdown menu item |
| value | boolean, number or string | | Value of the dropdown menu item |
### Code example
```jsx
import React from 'react';
import {
DropdownContainer,
DropdownMenu,
DropdownMultiSelect,
} from '@opuscapita/react-dropdown';
export default class ReactView extends React.Component {
constructor(props) {
super(props);
this.state = { checkedItems: List() };
}
componentWillMount() {
this.items = this.initializeItems();
}
onChange = (checkedItems) => {
this.setState({ checkedItems });
}
initializeItems = () => {
const items = [];
for (let i = 0; i < 300; i += 1) {
items.push({ value: i, label: `Item ${i}` });
}
return items;
};
render() {
return (
CONTENT
console.log('Item 1 clicked'),
disableClosing: true,
},
{
id: 'item_id_12',
title: 'Item 2, with the icon',
onClick: () => console.log('Item 2 clicked'),
icon: ,
},
{
id: 'item_id_d1',
type: 'divider',
},
{
id: 'item_id_13',
title: 'Item 3',
onClick: () => console.log('Item 3 clicked'),
disabled: true,
},
]}
/>
console.log('Item 1 clicked'),
},
{
id: 'item_id_22',
title: 'Item 2',
onClick: () => console.log('Item 2 clicked'),
},
{
id: 'item_id_d1',
type: 'divider',
},
{
id: 'item_id_23',
title: 'Item 3',
onClick: () => console.log('Item 3 clicked'),
disableClosing: true,
},
]}
title="Dropdown"
caret
pullRight={false}
/>
);
}
}
```