@crave/farmblocks-dropdown

Farmblocks Dropdown

Simple dropdown component. See examples on storybook

Installation

npm install @crave/farmblocks-dropdown

Usage

import React, { Component } from 'react';
import { render } from 'react-dom';
import {Dropdown, DropdownItem} from '@crave/farmblocks-dropdown';

class App extends Component {
  render() {
    return (
      <Dropdown text='Select fruit'
                align='left'
                handleSelection={(value, event) => console.log('handle selection', value)}>
        <DropdownItem value={1}>Banana</DropdownItem>
        <DropdownItem value={2}>Apple</DropdownItem>
        <DropdownItem value={3}>Strawberry</DropdownItem>
      </Dropdown>
    );
  }
}

render(<App />, document.getElementById('root'));

This code will render:

API

Dropdown

Property	Description	Type	Required	Default
children	Pass children of DropdownItem instances	node	x
text	The dropdown label. Renders only the icon if this property is empty	string		''
handleSelection	Function to handle selection of a DropdownItem. The first argument is the value, the second is the event	function		() => false
align	Align of dropdown items container	oneof(['left', 'right'])		left
zIndex	z-index passed to the dropdown items container	number
width	Custom dropdown items container width	string
size	One of the constants in buttonSizes from farmblocks-button package. For convenience, buttonSizes is also exported on this package	string		buttonSizes.MEDIUM
buttonProps	Props to be forwarded to the button trigger	Object

DropdownItem

Property	Description	Type	Required	Default
children	content to be rendered as the item text	node
text	This property is rendered as children of the item component. If passed, it suppress the children property	string
value	Option value. This property will be passed as the first argument on handleSelection property from Dropdown component	string or number
footer	Flag to use on a last item to behave like a footer, without hover color and regular cursor		false

License

MIT