react-dropdown-menu component

react-dropdown-simple-use is a simple dropdown menu with style customizable

Key Features

• Built-in and configurable:
  • Filtering
• Style Customizable

Installation

  npm install --save react-dropdown-simple-use

Usage

import

 import { Dropdown } from 'react-dropdown-simple-use'

simple use

const data = [
  {
    label: "opt 1",
    value: '1',
    default:true // optional
  },
  {
    label: "opt 2",
    value: '2',
  },
  {
    label: "opt 3",
    value: '3',
  },
  {
    label: "opt 4",
    value: '4',
  }
]

<Dropdown data ={data} />

Style Customizable

.my_container_classname{
  width:200px;
}

const myCustomStyles = {
  container: "my_container_classname",
  header: "my_header_classname",
  header_search: "my_search_classname",
  header_input: "my_input_classname",
  header_label: "my_label_classname",
  header_arrow: {
    size:'12px',
    color:"black"
  },
  options: "my_options_classname",
  option:"my_option_classname"
}
<Dropdown data ={data} menuCustomStyles={myCustomStyles} />

dropdrown with all props

<Dropdown data ={data} nameInput={nameInput} menuCustomStyles={menuCustomStyles} arrow/>

Descriptions props

| prop | type | value |Description | | :----------------------|:---------:| :---------:| :--------------------------:| | data | array | required | data | | nameInput | string | optional | name of the <input>element| | menuCustomStyles | object | optional | to customizie style by adding new class style to an element| | arrow | boolean | optional | to show or hidden the arrow |

License