@app-elements/dropdown

Simple dropdown menus.

Usage no npm install needed!

<script type="module">
  import appElementsDropdown from 'https://cdn.skypack.dev/@app-elements/dropdown';
</script>

README

Dropdown

Simple (P)React dropdown menus.

Installation

npm install --save @app-elements/dropdown

Usage

import Dropdown from '@app-elements/dropdown'

<Dropdown uid='home-example'>
  <p><button onClick={ev => store.setState({modal: 'ExampleModal'})}>Open Example Modal</button></p>
  <p><button onClick={ev => showNotification({message: 'PIRATES!'})}>Pirates!</button></p>
  <p>Classy Penguin</p>
</Dropdown>

Custom Trigger

// If you provide a Component or function for the Trigger prop,
// it will be given the following props: `className='btn-dropdown' onClick={handleToggle}`
// You will need to pass these props down, so the Dropdown functionality
// works with your custom Trigger component.
<Dropdown uid='home-example' Trigger={props => <MyTrigger {...props}>Custom Trigger</MyTrigger>}>

Props

Prop Type Default Description
uid String None Unique identifier for the dropdown.
buttonText String 'Select' Text displayed in the default button trigger for the Dropdown.
noWrapper Boolean false If true, will render children without any wrapping divs.
Trigger Component None Any provided Component will replace the default button trigger.
children Array None The elements to display when the Dropdown is open.