New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@crave/farmblocks-dropdown

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@crave/farmblocks-dropdown

Simple dropdown component. See [examples](https://cravefood.github.io/farmblocks/index.html?selectedKind=Dropdown) on storybook

  • 1.4.4-alpha-tooltip-position-4886.1.19
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20
increased by300%
Maintainers
6
Weekly downloads
 
Created

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

PropertyDescriptionTypeRequiredDefault
childrenPass children of DropdownItem instancesnodex
textThe dropdown label. Renders only the icon if this property is emptystring''
handleSelectionFunction to handle selection of a DropdownItem. The first argument is the value, the second is the eventfunction() => false
alignAlign of dropdown items containeroneof(['left', 'right'])left
zIndexz-index passed to the dropdown items containernumber
widthCustom dropdown items container widthstring
sizeOne of the constants in buttonSizes from farmblocks-button package. For convenience, buttonSizes is also exported on this packagestringbuttonSizes.MEDIUM

DropdownItem

PropertyDescriptionTypeRequiredDefault
childrencontent to be rendered as the item textnode
textThis property is rendered as children of the item component. If passed, it suppress the children propertystring
valueOption value. This property will be passed as the first argument on handleSelection property from Dropdown componentstring or number
footerFlag to use on a last item to behave like a footer, without hover color and regular cursorfalse

License

MIT

Keywords

FAQs

Package last updated on 15 Jul 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts