Narrowly Preventing Mayhem

    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

    Install

    npm i react-free-dropdown

    DownloadsWeekly Downloads

    10

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    194 kB

    Total Files

    38

    Last publish

    Collaborators

    • flamingotiger