@crave/farmblocks-dropdown

3.3.9 • Public • Published

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:

image

image

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

Readme

Keywords

Package Sidebar

Install

npm i @crave/farmblocks-dropdown

Weekly Downloads

5

Version

3.3.9

License

MIT

Unpacked Size

12.6 kB

Total Files

10

Last publish

Collaborators

  • viniciusmartin
  • luis.nascimento
  • seocam
  • vnakamura
  • alcferreira
  • imwra