Dropdown

This is a fully customizable Dropdown React Component.

Purpose

To have a customizable dropdown component that relies on no other libraries.

Usage

Clone or download this repo and add the custom-dropdown folder into your src folder.
From your src/App.js, import Dropdown:

import Dropdown from './custom-dropdown/dropdown/Dropdown';

Add your custom placeholder as a component parameter (string)

Example:

<Dropdown placeholder="Make A Choice" />

Add your choices (list of items) Example:

<Dropdown
  ...
  choices={[
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five",
    "Item Six",
    "Item Seven",
    "Item Eight",
    "Item Nine",
    "Item Ten",
    "Item Eleven",
    "This last entry is a very very long string to show how the rendering is within the dropdown",
  ]}
/>

Set your choice handle function

Example:

// Choice handle function
handleChoice = (value) => {
  this.setState({ ...this.state, item: value });
};

<Dropdown
  ...
  handleChoice={this.handleChoice}
/>

Set optional styles (see details below)

Styles

Here are the custom styles possibilities, using JSX.

Property	Default
customBtnStyle	fontFamily: 'Arial, Helvetica, sans-serif', display: 'inline-block', backgroundColor: 'lightgrey', width: '100%', maxWidth: '200px', border: 'solid 2px darkgrey', borderRadius: '5px', textAlign: 'center', padding: '5px',
customIconStyle	display: 'inline-block', float: 'right', marginTop: '4px', marginLeft: '10px', borderLeft: '8px solid transparent', borderRight: '8px solid transparent', borderTop: '8px solid darkgrey',
customUlStyle	listStyle: 'none', margin: '0', padding: '5px',
customdropdownListStyle	backgroundColor: 'lightgrey', border: 'solid 2px darkgrey', borderRadius: '5px', width: '100%', maxWidth: '200px', maxHeight: '200px', overflow: 'scroll', textAlign: 'center',
customLiStyle	'&hover': { backgroundColor: 'darkgrey', cursor: 'pointer', },

Examples of styling

Simply calling the Dropdown component with the placeholder, choices list and handle function.

default style

Example 1, adding custom style:

<Dropdown
  ...
  customBtnStyle={{
    color: 'white',
    backgroundColor: 'teal',
    borderColor: 'black',
  }}
  customIconStyle={{
    borderTop: '8px solid white',
  }}
  customdropdownListStyle={{
    position: 'absolute',
    top: 310,
    color: 'white',
    backgroundColor: 'teal',
    borderColor: 'black',
  }}

/>

custom style 1

Example 2, adding custom style:

<Dropdown
  ...
  customBtnStyle={{
    color: '#bfff80',
    backgroundColor: 'black',
    borderColor: 'white',
  }}
  customIconStyle={{
    borderTop: '8px solid white',
  }}
  customdropdownListStyle={{
    color: '#bfff80',
    backgroundColor: 'black',
    borderColor: 'white',
  }}

/>

custom style example 2

Demo

Try it on CodePen.

For the old version using a Class Component, you can check the CodePen here.

License

Distributed under the MIT license. See LICENSE for more information.