react-styled-dropdown

A React fully customizable dropdown built with styled components

Why should I use this?

The possibilities are endless. You can build a trivial dropdown, a custom select input, a price selector and etcetera.

Installation

Install with yarn add react-styled-dropdown or npm install react-styled-dropdown

Usage

A contrived example:

import Dropdown from 'react-styled-dropdown'

...

render() {
  return (
    <Dropdown
      renderOuterContent={({ active, show, hide }) => 'Press me!'}
      renderInnerContent={({ active, show, hide }) => 'Hi!'}
    />
  )
}

...

Yup! Simple as that! By default, the dropdown becomes active via click, but you can make it via hover using the showOnHover prop.

Customization

You might want to modify the containers. That should be easy.

In the dist folder are the base components that you can .extend. Follow along:

import Dropdown from 'react-styled-dropdown'
import OuterContainer from 'react-styled-dropdown/dist/OuterContainer' // in case you want to modify the button

const NewOuterContainer = OuterContainer.extend`
  background: red; // ew...
`
...

render() {
  return (
    <Dropdown
      OuterContainer={NewOuterContainer} // <-- here is the magic!
      renderOuterContent={({ active, show, hide }) => 'Press me!'}
      renderInnerContent={({ active, show, hide }) => 'Hi!'}
    />
  )
}

...

You have three options to extend (or put a entire new component, totally unrelated to the base ones): Wrapper, OuterContainer and InnerContainer. Feel free to modify as much as you want!

Feedbacks are appreciated, pull requests as well.

License

MIT