{"library":"react-dropdown","title":"React Dropdown Component","description":"React Dropdown is a simple, lightweight component designed for creating custom-styled dropdowns in React applications, currently at version 1.11.0. It addresses the styling limitations of native HTML `<select>` elements and supports grouped options, which are not easily achievable with standard HTML. Unlike more feature-rich libraries like `react-select`, this package prioritizes simplicity and customizability for basic dropdown needs, offering granular control over CSS classes for various parts of the component. While it has been stable, development appears to be inactive, with the last publish dating back over four years. It ships with TypeScript types and supports a wide range of React versions via peer dependencies, from 0.14.7 up to 18.0.0.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-dropdown"],"cli":null},"imports":["import Dropdown from 'react-dropdown';","import 'react-dropdown/style.css';","import type { Option } from 'react-dropdown';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport Dropdown from 'react-dropdown';\nimport 'react-dropdown/style.css';\n\nconst options = [\n  'one', 'two', 'three',\n  { type: 'group', name: 'Group 1', items: [\n    { value: 'four', label: 'Four' },\n    { value: 'five', label: 'Five' }\n  ]}\n];\n\nfunction MyDropdownComponent() {\n  const [selectedOption, setSelectedOption] = useState(options[0]);\n\n  const _onSelect = (option) => {\n    setSelectedOption(option);\n    console.log('Selected:', option.value);\n  };\n\n  return (\n    <div className=\"dropdown-container\">\n      <h2>Basic Dropdown Example</h2>\n      <Dropdown\n        options={options}\n        onChange={_onSelect}\n        value={selectedOption}\n        placeholder=\"Select an option\"\n        className=\"my-custom-dropdown\"\n        controlClassName=\"my-custom-control\"\n        menuClassName=\"my-custom-menu\"\n      />\n      <p>Current selection: {selectedOption ? selectedOption.label || selectedOption : 'None'}</p>\n    </div>\n  );\n}\n\nexport default MyDropdownComponent;\n","lang":"typescript","description":"Demonstrates basic usage with both flat and grouped options, state management, and custom class names.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}