sanusart / React Dropdown Select
Licence: mit
Customisable dropdown select for react
Stars: ✭ 227
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Dropdown Select
Easydropdown
A lightweight library for building beautiful styleable <select> elements
Stars: ✭ 337 (+48.46%)
Mutual labels: menu, select, dropdown
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (-65.2%)
Mutual labels: select, dropdown, menu
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (+1.32%)
Mutual labels: menu, select, dropdown
Ember Select Box
🔠 A faux select box for Ember apps
Stars: ✭ 60 (-73.57%)
Mutual labels: menu, select, dropdown
React Responsive Select
A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
Stars: ✭ 98 (-56.83%)
Mutual labels: select, dropdown
Pretty Dropdowns
A simple, lightweight jQuery plugin to create stylized drop-down menus.
Stars: ✭ 96 (-57.71%)
Mutual labels: select, dropdown
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+4059.47%)
Mutual labels: select, dropdown
Custom Reactjs Dropdown Components
Custom dropdown components for ReactJS
Stars: ✭ 110 (-51.54%)
Mutual labels: menu, dropdown
Yndropdownmenu
✨ Awesome Dropdown menu for iOS with Swift 5.0
Stars: ✭ 1,259 (+454.63%)
Mutual labels: menu, dropdown
Downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Stars: ✭ 10,183 (+4385.9%)
Mutual labels: select, dropdown
Angular2 Multiselect Dropdown
Angular 2 Dropdown Multiselect
Stars: ✭ 225 (-0.88%)
Mutual labels: select, dropdown
Multiselect
Vue 3 multiselect component with single select, multiselect and tagging options.
Stars: ✭ 92 (-59.47%)
Mutual labels: select, dropdown
Ngx Select Dropdown
Custom Dropdown for Angular 4+ with multiple and single selection options
Stars: ✭ 91 (-59.91%)
Mutual labels: select, dropdown
Azdropdownmenu
A simple dropdown menu component for iPhone
Stars: ✭ 198 (-12.78%)
Mutual labels: menu, dropdown
Autocomplete
🔮 Fast and full-featured autocomplete library
Stars: ✭ 1,268 (+458.59%)
Mutual labels: select, dropdown
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-55.95%)
Mutual labels: menu, select
Dopdropdownmenu Enhanced
DOPDropDownMenu 添加双列表 优化版 新增图片支持(double tableView, The optimization version ,new add image,detailText)
Stars: ✭ 1,757 (+674.01%)
Mutual labels: menu, dropdown
React Select Me
Fast 🐆. Lightweight 🐜. Configurable 🐙. Easy to use 🦄. Give it a shot 👉🏼
Stars: ✭ 119 (-47.58%)
Mutual labels: select, dropdown
V Tooltip
💬 Easy tooltips, popovers, dropdown for Vue
Stars: ✭ 2,109 (+829.07%)
Mutual labels: dropdown, menu
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (-21.15%)
Mutual labels: select, dropdown
react-dropdown-select
Customisable dropdown select for react
Features
- configurable via
prop
s - 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
Installation
npm install --save react-dropdown-select
Web site
Motivation
react-select is very nice, but sometimes project requirements are beyond it's abilities
Usage
import:
import Select from "react-dropdown-select";
and use as:
<Select options={options} onChange={(values) => this.setValues(values)} />
options and onChange are the minimum required props
Help and Contributions
How to help/contribute
- fix issues, pull request are very welcome
- write, improve docs
- write tests (we use jest)
- suggest features and improvements
Demo
API
Component props
Prop | Type | Default | Description |
---|---|---|---|
values | array | [] | Selected values |
options | array | [] | Available options, (option with key disabled: true will be disabled) |
keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) |
autoFocus | bool | false | If true, and searchable , dropdown will auto focus |
clearOnBlur | bool | true | If true, and searchable , search value will be cleared on blur |
clearOnSelect | bool | true | If true, and searchable , search value will be cleared upon value select/de-select |
name | string | null | If set, input type hidden would be added in the component with the value of the name prop as name and select's values as value |
required | bool | false | If set, input type hidden would be added in the component with required prop as true/false |
pattern | string | null | If set, input type hidden would be added in the component with pattern prop as regex |
dropdownGap | number | 5 | Gap between select element and dropdown |
multi | bool | false | If true - will act as multi-select, if false - only one option will be selected at the time |
placeholder | string | "Select..." | Placeholder shown where there are no selected values |
addPlaceholder | string | "" | Secondary placeholder on search field if any value selected |
disabled | bool | false | Disable select and all interactions |
style | object | {} | Style object to pass to select |
className | string | CSS class attribute to pass to select | |
loading | bool | false | Loading indicator |
clearable | bool | false | Clear all indicator |
searchable | bool | true | If true, select will have search input text |
separator | bool | false | Separator line between close all and dropdown handle |
dropdownHandle | bool | true | Dropdown handle to open/close dropdown |
dropdownHeight | string | "300px" | Minimum height of a dropdown |
direction | string | "ltr" | direction of a dropdown "ltr", "rtl" or "auto" |
searchBy | string | label | Search by object property in values |
sortBy | string | null | Sort by object property in values |
labelField | string | "label" | Field in data to use for label |
valueField | string | "value" | Field in data to use for value |
color | string | "#0074D9" | Base color to use in component, also can be overwritten via CSS |
closeOnScroll | bool | false | If true, scrolling the page will close the dropdown |
closeOnSelect | bool | false | If true, selecting option will close the dropdown |
dropdownPosition | string | "bottom" | Available options are "auto", "top" and "bottom" defaults to "bottom". Auto will adjust itself according Select's position on the page |
keepSelectedInList | bool | true | If false, selected item will not appear in a list |
portal | DOM element | false | If valid dom element specified - dropdown will break out to render inside the specified element |
create | bool | false | If true, select will create value from search string and fire onCreateNew callback prop |
backspaceDelete | bool | true | If true, backspace key will delete last value |
createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. {search} will be replaced by search value |
disabledLabel | string | "disabled" | Label shown on disabled field (after) the text |
additionalProps | object | null | Additional props to pass to Select |
Callback props
by using renderer props to override components some of the functionality will have to be handled manually with a help of internal props, states and methods exposed
Prop | Type | Default | Description |
---|---|---|---|
onChange | func | On values change callback, returns array of values objects | |
onDropdownClose | func | Fires upon dropdown close | |
onDropdownOpen | func | Fires upon dropdown open | |
onCreateNew | func | Fires upon creation of new item if create prop set to true
|
|
onClearAll | func | Fires upon clearing all values (via custom renderers) | |
onSelectAll | func | Fires upon selecting all values (via custom renderers) | |
onDropdownCloseRequest | func | undefined | Fires upon dropdown closing state, stops the closing and provides own method close()
|
contentRenderer | func | Overrides internal content component (the contents of the select component) | |
itemRenderer | func | Overrides internal item in a dropdown | |
noDataRenderer | func | Overrides internal "no data" (shown where search has no results) | |
optionRenderer | func | Overrides internal option (the pillow with an "x") on the select content | |
inputRenderer | func | Overrides internal input text | |
loadingRenderer | func | Overrides internal loading | |
clearRenderer | func | Overrides internal clear button | |
separatorRenderer | func | Overrides internal separator | |
dropdownRenderer | func | Overrides internal dropdown component | |
dropdownHandleRenderer | func | Overrides internal dropdown handle | |
searchFn | func | undefined | Overrides internal search function |
handleKeyDownFn | func | undefined | Overrides internal keyDown function |
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].