React-free-dropdown NPM

Easy custom dropdown list with React

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')}`