react-css-dropdown

A customizable react dropdown component that only uses CSS.

Stackblitz Demo

Install

npm install --save react-css-dropdown
yarn add react-css-dropdown

Usage

import React, { Component } from 'react'

import { Dropdown } from 'react-css-dropdown'
import 'react-css-dropdown/dist/index.css'

class Example extends Component {
  constructor() {
    super()
    this.state = {
      options: [
        { name: 'Option 1', value: '1' },
        { name: 'Option 2', value: '2' },
        { name: 'Option 3', value: '3' },
        { name: 'Option 4', value: '4', disabled: true }
      ],
      handleSelect: (event: React.ChangeEvent<HTMLSelectElement>) => {
        console.log(event)
      }
    }
  }
  render() {
    return <Dropdown {...this.state.props} />
  }
}

Pitfalls

As react-css-dropdown still uses the native HTML <select> element you are still at the perel of browser styled <option> elements but that said at least you don't have to go to the trouble of creating a dropdown from scratch and the complexity that goes along with it.

License

MIT © Joe Hill