react-beautiful-dropdown v0.0.7

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

🐞 Issues

• Issues: Issues

🏆 Author