react-beautiful-dropdown

🏗️ Online Demo

• Visit Npm package Homepage.
• Visit Project Homepage to see live demo.

🚀 Getting Started

• Compatibility

  • This package uses @emotion/styled": "^11.10.6 & react-icons: "^4.7.1" as peer dependencies.

• Installation

  • Install it via npm, by using

      npm install react-beautiful-dropdown

  • or via yarn, by hitting

      yarn add react-beautiful-dropdown

• Importing

  • Import it in your project, by using

      import ReactDropdown from "react-beautiful-dropdown"

• Using

  • Use it by adding,

    	<ReactDropdown
    		value={string}
    		options={options}
    		valueHandler={inputHandler}
    		placeholder="Type or select value here. . ."
    		error={{ isError: false, errorText: "Error" }}
    		// customInputStyles={{}}
    		// customDropdownItemStyles={{}}
    	/>

💻 Code Snippet Example

import ReactDropdown from "react-beautiful-dropdown";

const App = () => {
 const [string, setString] = useState("")

  const [options,] = useState([
    { id: '1', label: 'Grinning face 😀' },
    { id: '2', label: 'Grinning face with big eyes 😃	' },
    { id: '3', label: 'Beaming face with smiling eyes 😁' },
    { id: '4', label: 'Smiling face with halo 😇' },
    { id: '5', label: 'Star-struck 🤩' },
    { id: '6', label: 'Crazy face with tongue out 🤪' },
    { id: '7', label: 'Face in clouds 😶‍🌫️' },
    { id: '8', label: 'Relieved face 😌' },
    { id: '9', label: 'Miling face with sunglasses 😎' },
    { id: '10', label: 'Alien monster 👾' },
  ])

  const inputHandler = (val: string) => {
    // console.log(val)
    setString(val)
  }

  // ...other code

  return <ReactDropdown
		value={string}
		options={options}
		valueHandler={inputHandler}
		placeholder="Type or select value here. . ."
		error={{ isError: false, errorText: "Error" }}
		// customInputStyles={{}}
		// customDropdownItemStyles={{}}
	/>;
};

🧭 Props

| Prop name | Description | Type | Default value | | :-------: | :---------: | :--: | :-----------: | | value | Input string to show | string | "Sample value" | | valueHandler | Callback function that gives back you the updated inputn string value | (value: string) => void | () => void | | placeholder | Placeholder to show | string | Placeholder | | error | An error object, containing props for when to show error string and error string | { isError: boolean, errorText: string } | { isError: false, errorText: '' } | | customInputStyles | CSS style object | React.CSSProperties | undefined | | customDropdownItemStyles | CSS style object | React.CSSProperties | undefined |

🐞 Issues

• Issues: Issues

🏆 Author