A customizable react dropdown component that only uses CSS

by React

react-css-dropdown

A customizable react dropdown component that only uses CSS.

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: '1234' },
        { name: 'Option 2', value: '5678' },
        { name: 'Option 2', value: '91011' }
      ],
      handleSelect: (value: string) => console.log(value)
    }
  }
  render() {
    return <Dropdown {...this.state.props} />
  }
}

Pitfalls

As react-css-dropdown still uses native the 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.

GitHub