{"id":14969984,"url":"https://github.com/sanusart/react-dropdown-select","last_synced_at":"2025-05-14T15:06:20.720Z","repository":{"id":37270651,"uuid":"163028315","full_name":"sanusart/react-dropdown-select","owner":"sanusart","description":"Customisable dropdown select for react","archived":false,"fork":false,"pushed_at":"2025-05-10T06:59:48.000Z","size":50024,"stargazers_count":359,"open_issues_count":28,"forks_count":81,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-10T07:34:39.276Z","etag":null,"topics":["dropdown","menu","multi-select","react","reactjs","select"],"latest_commit_sha":null,"homepage":"https://react-dropdown-select.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sanusart.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-24T23:02:21.000Z","updated_at":"2025-05-08T17:15:17.000Z","dependencies_parsed_at":"2024-02-20T06:23:41.769Z","dependency_job_id":"1fc0178f-1dcc-4a6a-a170-6fd11f7af811","html_url":"https://github.com/sanusart/react-dropdown-select","commit_stats":{"total_commits":424,"total_committers":19,"mean_commits":22.31578947368421,"dds":0.1674528301886793,"last_synced_commit":"bbbc6f99d019aab832e2b9ce1962420d201a7915"},"previous_names":[],"tags_count":118,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanusart%2Freact-dropdown-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanusart%2Freact-dropdown-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanusart%2Freact-dropdown-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanusart%2Freact-dropdown-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanusart","download_url":"https://codeload.github.com/sanusart/react-dropdown-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169035,"owners_count":22026207,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropdown","menu","multi-select","react","reactjs","select"],"created_at":"2024-09-24T13:42:48.225Z","updated_at":"2025-05-14T15:06:20.714Z","avatar_url":"https://github.com/sanusart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-dropdown-select\n\nCustomisable dropdown select for react\n\n[![](https://badgen.net/bundlephobia/minzip/react-dropdown-select)](https://bundlephobia.com/result?p=react-dropdown-select)\n[![](https://img.shields.io/npm/v/react-dropdown-select.svg)](https://www.npmjs.com/package/react-dropdown-select)\n[![Coverage Status](https://coveralls.io/repos/github/sanusart/react-dropdown-select/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/sanusart/react-dropdown-select?branch=master)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/b24446a1398a4308ad5d2b825e61bf76)](https://app.codacy.com/gh/sanusart/react-dropdown-select/dashboard?utm_source=gh\u0026utm_medium=referral\u0026utm_content=\u0026utm_campaign=Badge_grade)\n\n### Features\n\n- configurable via `prop`s\n- total custom components overrides for all internals via render prop callbacks (with access to internal props, state and methods)\n- stylable via css (or custom components)\n- portal support for rendering dropdown outside local DOM tree. e.g. in `document.body`\n- auto position\n- small bundle size\n\n### Installation\n\n\u003e `npm install --save react-dropdown-select`\n\n### Web site\n\n[Web site, docs and demo](https://sanusart.github.io/react-dropdown-select)\n\n### Motivation\n\nreact-select is very nice, but sometimes project requirements are beyond it's abilities\n\n### Usage\n\nimport:\n\n`import Select from \"react-dropdown-select\";`\n\nand use as:\n\n```jsx\nconst options = [\n {\n value: 1,\n label: 'Leanne Graham'\n },\n {\n value: 2,\n label: 'Ervin Howell'\n }\n];\n\n\u003cSelect options={options} onChange={(values) =\u003e this.setValues(values)} /\u003e;\n```\n\nIf your options don't have **value** and **label** fields, include **labelField** and **valueField** in the props:\n\n```jsx\nconst options = [\n {\n id: 1,\n name: 'Leanne Graham'\n },\n {\n id: 2,\n name: 'Ervin Howell'\n }\n];\n\n\u003cSelect\n options={options}\n labelField=\"name\"\n valueField=\"id\"\n onChange={(values) =\u003e this.setValues(values)}\n/\u003e;\n```\n\n\u003e **options** and **onChange** are the minimum required props\n\n### Help and Contributions\n\n#### How to help/contribute\n\n- fix issues, pull request are very welcome\n- write, improve docs\n- write tests (we use jest)\n- suggest features and improvements\n\n### Demo\n\n[![Edit react-dropdown-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p54p8y1987?autoresize=1)\n\n# API\n\n### Component props\n\n| Prop | Type | Default | Description |\n| ------------------------------------------------------------------------------------------- | ----------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| values | array | [] | Selected values |\n| options | array | [] | Available options, (option with key `disabled: true` will be disabled) |\n| keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) |\n| defaultMenuIsOpen | bool | false | If true, dropdown will be open by default |\n| autoFocus | bool | false | If true, and `searchable`, dropdown will auto focus |\n| clearOnBlur | bool | true | If true, and `searchable`, search value will be cleared on blur |\n| clearOnSelect | bool | true | If true, and `searchable`, search value will be cleared upon value select/de-select |\n| 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 |\n| required | bool | false | If set, input type hidden would be added in the component with `required` prop as true/false |\n| pattern | string | null | If set, input type hidden would be added in the component with `pattern` prop as regex |\n| dropdownGap | number | 5 | Gap between select element and dropdown |\n| multi | bool | false | If true - will act as multi-select, if false - only one option will be selected at the time |\n| placeholder | string | \"Select...\" | Placeholder shown where there are no selected values |\n| addPlaceholder | string | \"\" | Secondary placeholder on search field if any value selected |\n| disabled | bool | false | Disable select and all interactions |\n| style | object | {} | Style object to pass to select |\n| className | string | | CSS class attribute to pass to select |\n| loading | bool | false | Loading indicator |\n| clearable | bool | false | Clear all indicator |\n| searchable | bool | true | If true, select will have search input text |\n| separator | bool | false | Separator line between close all and dropdown handle |\n| dropdownHandle | bool | true | Dropdown handle to open/close dropdown |\n| dropdownHeight | string | \"300px\" | Minimum height of a dropdown |\n| direction | string | \"ltr\" | direction of a dropdown \"ltr\", \"rtl\" or \"auto\" |\n| searchBy | string | label | Search by object property in values |\n| sortBy | string | null | Sort by object property in values |\n| labelField | string | \"label\" | Field in data to use for label |\n| valueField | string | \"value\" | Field in data to use for value |\n| color | string | \"#0074D9\" | Base color to use in component, also can be overwritten via CSS |\n| closeOnScroll | bool | false | If true, scrolling the page will close the dropdown |\n| closeOnSelect | bool | false | If true, selecting option will close the dropdown |\n| closeOnClickInput | bool | false | If true, clicking input will close the dropdown if you are not searching. |\n| [dropdownPosition](https://sanusart.github.io/react-dropdown-select/prop/dropdown-position) | string | \"bottom\" | Available options are \"auto\", \"top\" and \"bottom\" defaults to \"bottom\". Auto will adjust itself according Select's position on the page |\n| keepSelectedInList | bool | true | If false, selected item will not appear in a list |\n| portal | DOM element | false | If valid dom element specified - dropdown will break out to render inside the specified element |\n| create | bool | false | If true, select will create value from search string and fire `onCreateNew` callback prop |\n| backspaceDelete | bool | true | If true, backspace key will delete last value |\n| 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 |\n| disabledLabel | string | \"disabled\" | Label shown on disabled field (after) the text |\n| selectAll | bool | false | Allow to select all |\n| selectAllLabel | string | \"Select all\" | Label for \"Select all\" |\n| clearAllLabel | string | \"Clear all\" | Label for \"Clear all\" |\n| additionalProps | object | null | Additional props to pass to Select |\n\n### Callback props\n\n\u003e 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\n\n| Prop | Type | Default | Description |\n|----------------------------------------------------------------------------------------------------------| ---- | --------- |------------------------------------------------------------------------------------------------|\n| onChange | func | | On values change **(user and internally triggered)** callback, returns array of values objects |\n| onSelect | func | | On values change (user triggered) callback, returns array of values objects |\n| onDeselect | func | | On values change (user triggered) callback, returns array of values objects |\n| onDropdownClose | func | | Fires upon dropdown close |\n| onDropdownOpen | func | | Fires upon dropdown open |\n| onCreateNew | func | | Fires upon creation of new item if `create` prop set to `true` |\n| onClearAll | func | | Fires upon clearing all values (via custom renderers) |\n| onSelectAll | func | | Fires upon selecting all values (via custom renderers) |\n| onDropdownCloseRequest | func | undefined | Fires upon dropdown closing state, stops the closing and provides own method `close()` |\n| [contentRenderer](https://sanusart.github.io/react-dropdown-select/prop/content-renderer) | func | | Overrides internal content component (the contents of the select component) |\n| [itemRenderer](https://sanusart.github.io/react-dropdown-select/prop/item-renderer) | func | | Overrides internal item in a dropdown |\n| [noDataRenderer](https://sanusart.github.io/react-dropdown-select/prop/no-data-renderer) | func | | Overrides internal \"no data\" (shown where search has no results) |\n| [optionRenderer](https://sanusart.github.io/react-dropdown-select/prop/option-renderer) | func | | Overrides internal option (the pillow with an \"x\") on the select content |\n| [inputRenderer](https://sanusart.github.io/react-dropdown-select/prop/input-renderer) | func | | Overrides internal input text |\n| [loadingRenderer](https://sanusart.github.io/react-dropdown-select/prop/loading-renderer) | func | | Overrides internal loading |\n| [clearRenderer](https://sanusart.github.io/react-dropdown-select/prop/clear-renderer) | func | | Overrides internal clear button |\n| [separatorRenderer](https://sanusart.github.io/react-dropdown-select/prop/separator-renderer) | func | | Overrides internal separator |\n| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |\n| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |\n| searchFn | func | undefined | Overrides internal search function |\n| handleKeyDownFn | func | undefined | Overrides internal keyDown function |\n\n### License\n\n[MIT](https://github.com/sanusart/react-dropdown-select/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanusart%2Freact-dropdown-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanusart%2Freact-dropdown-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanusart%2Freact-dropdown-select/lists"}