react-free-dropdown
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published
react free fropdown logo

react-free-dropdown (RFDD)

Easy custom dropdown list with React

Actions Status npm install size npm downloads

Get Started 📦

react-free-dropdown install the package.

npm install react-free-dropdown

Usage 📃

import React from 'react';
import { Rfdd, RfddOption } from 'react-free-dropdown';
 
const App = () => {
  const [value, setValue] = React.useState('');
  return (<>
      <Rfdd onChange={optionValue => setValue(optionValue)}>
        <RfddOption value="Apple">Apple</RfddOption>
        <RfddOption value="Grape">Grape</RfddOption>    
      </Rfdd>
      <p>{value}</p>
    </>);
}
 
export default App;

Rfdd Property ⛷

Property Type Descriptions Example
selectClassName string select className selectClassName="select-classname"
selectStyle React.CSSProperties select component style selectStyle={{border: '1px solid red'}}
optionClassName string option className optionClassName="option-classname"
optionStyle string all option custom style optionStyle='border: 1px solid red;'
style React.CSSProperties dropdown wrapper style style={{border: '1px solid red'}}
className string dropdown wrapper className className="wrapper-classname"
focusStyle React.CSSProperties if focus use style focusStyle={{border: '1px solid red'}}
value string selected value value={value}
children React.ReactElement<RfddOptionType, 'RfddOption'>[] only use RfddOption component <RfddOption>option</RfddOption>
onChange (value: string) => void change value function onChange={(optionValue) => setValue(optionValue)}
mode light or dark light or dark mode mode='dark'
hoverStyle string custom hover style hoverStyle='border: 1px solid red;'
icon any usage import image import image from './example.png' icon={image}
hiddenIcon boolean hidden icon hiddenIcon={true}
placeholder string setting placeholder placeholder='area'
listStyle string ul list style listStyle='max-height:200px'
optionOnClick () => void all option onClick optionOnClick={() => console.log('onClick')}

RfddOption Property 🏂

Property Type Descriptions Example
value string option value value='option-value'
style React.CSSProperties must be entered as camelcase style={{ border: '1px solid red' }}
className string must be entered as camelcase className="class-name"
children React.ReactNode option children option text or <div>option Element</div>
hoverStyle string each option custom hover style hoverStyle='border: 1px solid red;'
onClick () => void onChange before active function onClick={() => console.log('onClick')}

Preview 🎆

react-free-dropdown preview

🔎Play the example

Package Sidebar

Install

npm i react-free-dropdown

Weekly Downloads

10

Version

1.1.1

License

MIT

Unpacked Size

194 kB

Total Files

38

Last publish

Collaborators

  • flamingotiger