react-free-dropdown

react-free-dropdown ^(RFDD)

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

Preview 🎆

🔎Play the example