dropdown-sample v1.0.4

dropdown-sample

dropdown component library

Install the dropdown component

npm i --save dropdown-sample

Install dependencies (antd & styled components 💅)

npm i --save antd 
npm i --save styled-components 

Usage

import React, { Component } from 'react'

import Dropdown from 'dropdown-sample'

class Example extends Component {
  render () {
    return (
      <Dropdown 
        options={[
          { key: 'one', value: 'A simple option' },
          { key: 'two', value: 'A second option' },
          { key: 'three', value: 'Third and final!' },
          { key: 'four', value: 'mangos' },
        ]}
        placeholder="Select an Option"
        size="small"
        onChange={() => {}}
        onFocus={() => {}}
        onBlur={() => {}}
      />
    )
  }
}

usage with icon emojis.

<Dropdown 
  options={[
    {key: 'one', value: 'strawberry', icon: '🍓'},
    {key: 'two', value: 'watermelon', icon: '🍉' },
    {key: 'three', value: 'mango', icon: '🥭' },
    {key: 'four', value: 'avocado', icon: '🥑' },
    {key: 'five', value: 'pear', icon: '🍐' },
  ]}
  placeholder="Select an option (w/ a cute fruit icon!)"
  size="medium"
  onChange={() => console.log('On change FIRED 🚀')}
  onFocus={() => console.log('On focus FIRED 🚀')}
  onBlur={() => console.log('On blur FIRED 🚀')}
/>

usage with icon emojis + descriptions.

<Dropdown 
  options={[
    {key: 'one', value: 'I have a description', icon: '🍓', description: 'I am an option with a cool fancy description on the bottom!'},
    {key: 'two', value: 'Option 2', icon: '🍓', description: 'If you pick me, yay!'},
    {key: 'three', value: 'Watermelon', icon: '🍓', description: 'Should we make watermelons smoothies?'},
  ]}
  placeholder="Select an option (w/ a description!)"
  size="large"
  onChange={() => console.log('On change FIRED 🚀')}
  onFocus={() => console.log('On focus FIRED 🚀')}
  onBlur={() => console.log('On blur FIRED 🚀')}
/>

Building the project + example

Clone the repository

git clone <path_to_repo>

Install the dependancies

cd  <path_to_repo>
yarn install

Start up the component library

yarn start

Open a new terminal tab and navigate to example directory

cd <path_to_repo>/example 

Install the dependancies for the example react app

yarn install

Start the development server. A browser window should open with some examples of the dropdown :)

yarn start

Props

License

MIT © ejdweck