1.0.0 • Published 2 months ago

react-dropdown-simple-use v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
2 months ago

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

proptypevalueDescription
dataarrayrequireddata
nameInputstringoptionalname of the <input>element
menuCustomStylesobjectoptionalto customizie style by adding new class style to an element
arrowbooleanoptionalto show or hidden the arrow

License

1.0.0

2 months ago