{"id":19311979,"url":"https://github.com/weblineindia/reactjs-dropdown","last_synced_at":"2025-04-22T15:31:33.648Z","repository":{"id":57347632,"uuid":"282216976","full_name":"weblineindia/ReactJS-Dropdown","owner":"weblineindia","description":"ReactJS Dropdown Component is a feature rich select / dropdown / typeahead component. It provides a default template that fits most use cases for a filterable select dropdown.","archived":false,"fork":false,"pushed_at":"2024-03-30T09:29:13.000Z","size":203,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-04T06:02:42.302Z","etag":null,"topics":["dropdown-component","dropdown-component-demo","react-components","react-demo","react-dropdown","react-libraries","react-select","reactjs","reactjs-components","reactjs-demo","reactjs-dropdown","reactjs-dropdown-component","reactjs-library","reactjs-select","reusable-components","select-component"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","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/weblineindia.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}},"created_at":"2020-07-24T12:42:03.000Z","updated_at":"2024-03-30T09:29:17.000Z","dependencies_parsed_at":"2024-10-25T00:45:39.891Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/ReactJS-Dropdown","commit_stats":{"total_commits":3,"total_committers":2,"mean_commits":1.5,"dds":"0.33333333333333337","last_synced_commit":"4ca78379e9ef2f30034668c4174bfa7ff9f8f40b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/ReactJS-Dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223900372,"owners_count":17222028,"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-component","dropdown-component-demo","react-components","react-demo","react-dropdown","react-libraries","react-select","reactjs","reactjs-components","reactjs-demo","reactjs-dropdown","reactjs-dropdown-component","reactjs-library","reactjs-select","reusable-components","select-component"],"created_at":"2024-11-10T00:31:53.202Z","updated_at":"2024-11-10T00:32:17.357Z","avatar_url":"https://github.com/weblineindia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactJS - Dropdown Component\n\nReactJS Dropdown Component is a feature rich select / dropdown / typeahead component. It provides a default template that fits most use cases for a filterable select dropdown. \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## Table of contents\n\n- [Browser Support](#browser-support)\n- [Demo](#demo)\n- [Getting started](#getting-started)\n- [Available Props](#available-props)\n- [Events](#events)\n- [Want to Contribute?](#want-to-contribute)\n- [Collection of Other Components](#collection-of-components)\n- [Changelog](#changelog)\n- [Credits](#credits)\n- [License](#license)\n- [Keywords](#Keywords)\n\n## Browser Support\n\n| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |\n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |\n\n## Demo\n\n[![](dropdown.gif)](https://github.com/weblineindia/ReactJS-Dropdown/dropdown.gif)\n\n## Getting started\n\n```bash\nnpm install react-weblineindia-dropdown\n# oR\nyarn add react-weblineindia-dropdown\n```\n\nThen, import and register the component:\n\n```js\nimport React, { Component } from \"react\";\nimport Select from 'react-weblineindia-dropdown'\nclass Test extends Component {\n constructor(props) {\n super(props);\n this.state = {\n gender: [\n { label: \"abc\", value: \"1\" },\n { label: \"pqr\", value: \"2\" },\n { label: \"xyz\", value: \"3\" },\n ],\n };\n }\n\n setValues = (values) =\u003e {\n // Handle selected values here\n };\n\n render() {\n return (\n \u003cdiv\u003e\n \u003cSelect\n options={this.state.gender}\n onChange={(values) =\u003e this.setValues(values)}\n /\u003e\n \u003c/div\u003e\n );\n }\n}\n\n```\n\n## Available 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| 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| 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| dropdownPosition | 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| additionalProps | object | null |\n\n## Events\n\n| Prop | Type | Default | Description |\n| -------------------------------------------------------------------------------------------------------- | ---- | --------- | -------------------------------------------------------------------------------------- |\n| onChange | func | | On values change 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 | func | | Overrides internal content component (the contents of the select component) |\n| itemRenderer | func | | Overrides internal item in a dropdown |\n| noDataRenderer | func | | Overrides internal \"no data\" (shown where search has no results) |\n| optionRenderer | func | | Overrides internal option (the pillow with an \"x\") on the select content |\n| inputRenderer | func | | Overrides internal input text |\n| loadingRenderer | func | | Overrides internal loading |\n| clearRenderer | func | | Overrides internal clear button |\n| separatorRenderer | func | | Overrides internal separator |\n| dropdownRenderer | func | | Overrides internal dropdown component |\n| dropdownHandleRenderer | func | | Overrides internal dropdown handle |\n| searchFn | func | undefined | Overrides internal search function |\n| handleKeyDownFn | func | undefined | Overrides internal keyDown function |\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n---\n\n## Collection of Components\n\nWe have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).\n\n---\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## Credits\n\nreact-weblineindia-dropdown is inspired by [react-dropdown-select](https://www.npmjs.com/package/react-dropdown-select).\n\n## License\n\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/ReactJS-Dropdown/blob/master/LICENSE\n\n## Keywords\n\nreact-weblineindia-dropdown, react-dropdown, reactjs-dropdown, dropdown-component, react-select, reactjs-select\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Freactjs-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Freactjs-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Freactjs-dropdown/lists"}