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-dropdown

API

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.