Top React Dropdown Component Examples
1.React Dropdown component
A Nice React Dropdown Component.
React Dropdown
Demo: https://trendmicro-frontend.github.io/react-dropdown
GitHub: https://github.com/trendmicro-frontend/react-dropdown
2.React laag
Basically any kind of layer that can be toggled. Focus on what your layer should look like, and let react-laag take care of where and when to show it.
Features
- Build your own tooltips / dropdown-menus / pop-overs / etc…
- Not opinionated regarding styling or animations
- Highly customizable
- Small footprint (tree-shakable)
- Zero dependencies
- Built with typescript / ships with typescript definitions
- Integrates well with other libraries
- Automatically adjusts your layer’s placement to fit the screen
- Works with nested scroll-containers
- Observes and reacts to changes in dimensions
Demo: https://www.react-laag.com/
3.Downshift hooks
This repo and npm library was mainly for experimenting with the useSelect hook before merging it to Downshift main repo.
A set of hooks to build simple, flexible, WAI-ARIA compliant React dropdown components.useSelect has been merged into Downshift so start using it from there. Thanks!
Demo: https://downshift-hooks.netlify.com/
4.React async select
Async dropdown component with advanced search modal
This component is a combination of a combobox with asynchronous fetching of results and a modal search dialog for more filtering possibilities.
Demo
View the DEMO
5.React dropdown select
Customizable dropdown select for react.
Features
- configurable via props
- total custom components overrides for all internals via render prop callbacks (with access to internal props, state and methods)
- stylable via css (or custom components)
- portal support for rendering dropdown outside local DOM tree. e.g. in document.body
- auto position
- small bundle size
Demo: https://sanusart.github.io/react-dropdown-select/
6.React responsive navbar
Navbar component that moves the navbar items to a dropdown, if they do not fit in the content area.
7.React Simple Dropdown
Non-prescriptive React.js dropdown toolkit.
8.React focus trap
Traps focus for accessible dropdowns and modal content https://react-focus-trap.netlify.com.
9.React dropdown tree select
A lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection. Also supports displaying partially selected nodes.
10.React menu list
This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are correctly keyboard-accessible, and it includes polish like established desktop application menus have such as well-behaved submenus which stay open even if the user briefly moves the mouse over other menu items while moving toward the submenu’s dropdown.
This project differs from other similar projects because it allows arbitrary elements to be in the menu, including allowing menu items to be nested into other elements, and allows custom menu items that take control of the cursor.
This project doesn’t include much CSS styling for the menus. You need to bring your own CSS. This makes this project great for someone trying to match their application’s existing style. It’s recommended that your application create wrapper components around this project’s components that add your application’s CSS.
The above example can be tried here:
https://streakyc.github.io/react-menu-list/example/
11.React float anchor
This is a React component for anchoring a fixed position element, such as a dropdown menu, to the edge of an element on the page. The fixed position element will automatically be placed so that it fits on the screen if possible, and it will automatically reposition if needed when the user scrolls.
GitHub: https://github.com/StreakYC/react-float-anchor
12.React dropdown
Simple Dropdown component for React, inspired by react-select Demo is available here
Why
- The default HTML select element is hard to style
- And sometime we also want grouped menus
- if you want more advanced select, check react-select
Demo: http://fraserxu.me/react-dropdown/
13.React bootstrap dropdown menu
A simple Dropdown Menu for React. Commonly used as a ‘User Settings’ menu on websites where users login.
14.rc Dropdown
react dropdown component.
Example
online example: http://react-component.github.io/dropdown/examples/
15.React responsive navbar
Navbar component that moves the navbar items to a dropdown, if they do not fit in the content area.
Demo
View the DEMO
16.Object editor react
object-editor-react is a visual editor for structured JSON data, available as a simple drop-in React component.
🔌 Drop-in, structured editing of deeply nested JSON objects
⚛️ Schema aware: create nested objects and array elements in real time
🏗 Bulk operations for working with larger objects
17.Downshift
Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete/dropdown/select/combobox components
#reactjs #javascript
