Skip to content

🍉 Dropdown with customizable grid that allows to separate its content on sections

License

Notifications You must be signed in to change notification settings

chris-catignani/react-grid-dropdown

 
 

Repository files navigation

React-Grid-Dropdown

npm version travis build

alt tag

Installation

npm install react-grid-dropdown --save

Usage

import GridDropdown from 'react-grid-dropdown'
import 'react-grid-dropdown/dist/style.css'

<GridDropdown
  label="dropdown"
  activeItem={this.state.activeItem}
  items={
    [{section: 'category', label: 'itemLabel', id: 'itemId', backgroundImage: `url(${url})`, onClick: () => this.setState({ activeItem: 'itemId' })}]
  }
/>

Options

Name Type Description Default
label string
activeItem string item to recieve 'active' class when pressed
items array items to render in the dropdown
sectionsOrder array
buttonClass string class for dropdown button
dropdownClass string class for dropdown container
itemClass string class for each item in the dropdown
itemLabelClass string class for text of each item
buttonStyle string style for dropdown button
dropdownStyle string style for dropdown container
itemStyle string style for each item in the dropdown
itemLabelStyle string style for text of each item

Item

Name Type
section string
label string
id string
backgroundImage string, url
backgroundColor string, color
onClick func

License

GitHub license

Developed by bl00mber for cellular automata generator

About

🍉 Dropdown with customizable grid that allows to separate its content on sections

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 83.6%
  • CSS 15.0%
  • HTML 1.4%