1.0.1 • Published 4 years ago
react-shapeless-dropdown v1.0.1
react-shapeless-dropdown
React dropdown component that can be opened and closed by clicking on an adjustable via props button. Dropdown can show any kind of text or another component.
Installation
npm install react-shapeless-dropdownAPI
| Property | Type | Default | Description | |
|---|---|---|---|---|
| button | any | 'Menu' | "Toggle" button text or component. Always visible. | |
| closeOnScroll | boolean | true | When true, scrolling will close the dropdown box. | |
| closeOnAction | boolean | true | When true, click on nested component or keyboard "Enter" will close the dropdown box. | |
| boxGap | number | 10 | Gap between "toggle" element and dropdown box. | |
| boxHeight | number | 250 | Limits dropdown box height. | |
| boxPosition | string | 'auto' | Can be "auto", "top" or "bottom". "auto" adjusts dropdown box to fit on the page. | |
| onDropdownOpen | function | () =>{} | Fires when user opens dropdown. | |
| onDropdownClose | function | () => {} | Fires when user closes dropdown. | |
| focusRef | object | null | Reference to the element that should be focused when dropdown is opened. | |
| boxStyle | object | null | Merged with dropdown box style. | |
| arrowStyle | object | null | Merged with up-down arrow style. | |
| crossStyle | object | null | Merged with closing cross style. |
Usage
import React, {Component} from 'react';
import {Dropdown} from 'react-shapeless-dropdown';
export default class App extends Component {
render() {
const button = ({text}) => (<div>{`>>${text}<<`}</div>);
return (
<Dropdown button={button({text: 'Menu'})}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Dropdown>
);
}
}License
Copyright (c) 2019 Aleksandr Novikov. License.