{"id":14969981,"url":"https://github.com/dbilgili/custom-reactjs-dropdown-components","last_synced_at":"2025-04-06T13:11:06.397Z","repository":{"id":41113756,"uuid":"149929136","full_name":"dbilgili/Custom-ReactJS-Dropdown-Components","owner":"dbilgili","description":"Custom dropdown components for ReactJS","archived":false,"fork":false,"pushed_at":"2021-03-02T13:16:38.000Z","size":3867,"stargazers_count":148,"open_issues_count":5,"forks_count":87,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-30T11:11:17.499Z","etag":null,"topics":["dropdown","dropdown-menu","menu","multi-selection","react","reactjs"],"latest_commit_sha":null,"homepage":"https://dbilgili.github.io/Custom-ReactJS-Dropdown-Components","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dbilgili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://www.paypal.me/dbilgili"}},"created_at":"2018-09-22T23:06:08.000Z","updated_at":"2024-07-18T17:53:05.000Z","dependencies_parsed_at":"2022-08-31T18:50:17.678Z","dependency_job_id":null,"html_url":"https://github.com/dbilgili/Custom-ReactJS-Dropdown-Components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FCustom-ReactJS-Dropdown-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FCustom-ReactJS-Dropdown-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FCustom-ReactJS-Dropdown-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbilgili%2FCustom-ReactJS-Dropdown-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbilgili","download_url":"https://codeload.github.com/dbilgili/Custom-ReactJS-Dropdown-Components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485287,"owners_count":20946398,"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","dropdown-menu","menu","multi-selection","react","reactjs"],"created_at":"2024-09-24T13:42:47.872Z","updated_at":"2025-04-06T13:11:06.372Z","avatar_url":"https://github.com/dbilgili.png","language":"JavaScript","readme":"This package features two custom dropdown menu components for ReactJS.\n\n__WARNING:__ Breaking changes take effect from version `1.1.7`. If you are using any of the earlier versions, refer to the [previous README files](https://www.npmjs.com/package/reactjs-dropdown-component?activeTab=explore).\n\n[Online demo](https://dbilgili.github.io/Custom-ReactJS-Dropdown-Components/index.html)\n\n__Single-selection__       |  __Multi-selection__\n:-------------------------:|:-------------------------:\n\u003cimg src=\"https://user-images.githubusercontent.com/22943912/80020903-121f4e80-84da-11ea-847d-fca74bf64658.gif\" width=\"250px\"\u003e |  \u003cimg src=\"https://user-images.githubusercontent.com/22943912/80020916-13507b80-84da-11ea-8dae-144dcc43df36.gif\" width=\"250px\"\u003e\n__Single-selection searchable__       |  __Multi-selection searchable__\n\u003cimg src=\"https://user-images.githubusercontent.com/22943912/80020914-13507b80-84da-11ea-8cce-0f9c515cdb71.gif\" width=\"250px\"\u003e  |  \u003cimg src=\"https://user-images.githubusercontent.com/22943912/80020910-12b7e500-84da-11ea-9f5f-0632c4db4126.gif\" width=\"250px\"\u003e\n\n# Installation\n\n`npm install --save reactjs-dropdown-component`\n\n# Usage\n\nImport the component you want to use;\n\n```javascript\nimport { DropdownMultiple, Dropdown } from 'reactjs-dropdown-component';\n```\n\nIf you are using NextJS, import them dynamically instead;\n\n```javascript\nimport dynamic from 'next/dynamic';\n\nconst Dropdown = dynamic(\n  async () =\u003e {\n    const module = await import('reactjs-dropdown-component');\n    const DD = module.Dropdown;\n\n    return ({ forwardedRef, ...props }) =\u003e \u003cDD ref={forwardedRef} {...props} /\u003e;\n  },\n  { ssr: false },\n);\n\nconst DropdownMultiple = dynamic(\n  async () =\u003e {\n    const module = await import('reactjs-dropdown-component');\n    const DDM = module.DropdownMultiple;\n\n    return ({ forwardedRef, ...props }) =\u003e \u003cDDM ref={forwardedRef} {...props} /\u003e;\n  },\n  { ssr: false },\n);\n```\n\nThe shape of the objects in the data array should be as follows:\n\n```javascript\nconst locations = [\n  {\n    label: 'New York',\n    value: 'newYork',\n  },\n  {\n    label: 'Oslo',\n    value: 'oslo',\n  },\n  {\n    label: 'Istanbul',\n    value: 'istanbul',\n  }\n];\n```\n\nUse a function to pass to `onChange` prop.\nFor `\u003cDropdown\u003e` component item is an object, whereas for `\u003cDropdownMultiple\u003e` it is an array of objects.\n\n```javascript\n  onChange = (item, name) =\u003e {\n    ...\n  }\n```\n\nFinally use the components as follows:\n\n```javascript\n\u003cDropdown\n  name=\"location\"\n  title=\"Select location\"\n  list={locations}\n  onChange={this.onChange}\n/\u003e\n\n\u003cDropdownMultiple\n  name=\"location\"\n  title=\"Select location\"\n  titleSingular=\"location\"\n  list={locations}\n  onChange={this.onChange}\n/\u003e\n```\n\nNote that when multiple options are selected in `\u003cDropdownMultiple\u003e`, `titleSingular` value automatically becomes the plural form of the noun. If you want to use a custom plural title, define `titlePlural` as well.\n\n```javascript\n\u003cDropdownMultiple\n  name=\"location\"\n  title=\"Velg sted\"\n  titleSingular=\"Sted\"\n  titlePlural=\"Steder\"\n  list={locations}\n  onChange={this.onChange}\n/\u003e\n```\n\n## Search functionality\n\nUsing `searchable` prop enables the search bar.\nPass an array of strings corresponding to __place holder__ and __not found message__ respectively.\n\n```javascript\n\u003cDropdown\n  name=\"location\"\n  title=\"Select location\"\n  searchable={[\"Search for location\", \"No matching location\"]}\n  list={locations}\n  onChange={this.onChange}\n/\u003e\n```\n\n## Selecting item(s) by default\n\nUse the `select` prop to define the initally selected item(s).\n\nFor `\u003cDropdown\u003e`\n```javascript\nselect={{value: 'istanbul'}}\n```\n\nFor `\u003cDropdownMultiple\u003e`\n```javascript\nselect={[{value: 'oslo'}, {value: 'istanbul'}]}\n```\n\n## Calling internal functions\n\nPass a ref and use it to call the internal functions.\n\nFor `\u003cDropdown\u003e`\n```javascript\n\u003cDropdown\n  ref={this.dropdownRef}\n  ...\n/\u003e\n\nthis.dropdownRef.current.selectSingleItem({ value: 'oslo' });\nthis.dropdownRef.current.clearSelection();\n```\n\nFor `\u003cDropdownMultiple\u003e`\n```javascript\n\u003cDropdownMultiple\n  ref={this.dropdownRef}\n  ...\n/\u003e\n\nthis.dropdownRef.current.selectMultipleItems([\n  { value: 'istanbul' }\n  { value: 'oslo' },\n]);\n\nthis.dropdownRef.current.selectAll();\nthis.dropdownRef.current.deselectAll();\n```\n\n## Custom styling\n\nUse the following keys in an object passed to `styles` prop\n\n```javascript\nwrapper\nheader\nheaderTitle\nheaderArrowUpIcon\nheaderArrowDownIcon\ncheckIcon\nlist\nlistSearchBar\nscrollList\nlistItem\nlistItemNoResult\n```\n\nExample:\n\n```javascript\n\u003cDropdown\n  name=\"location\"\n  title=\"Select location\"\n  list={locations}\n  onChange={this.onChange}\n  styles={{\n    headerTitle: { color: 'red' }\n  }}\n/\u003e\n```\n\nNote that `styles` prop is meant for basic styling. Use stylesheet by targeting the specific [class names](https://github.com/dbilgili/Custom-ReactJS-Dropdown-Components/blob/master/src/styles/dropdown.sass) for more complicated stylings.\n\nUse `id` prop to set an additional class name to every element in the dropdown menu. That way you can style multiple dropdown menus with different stylings rules.\n\nIn order to define your own arrow and check icons, use `arrowUpIcon`, `arrowDownIcon` and `checkIcon` props. These props accept an element type.\n","funding_links":["https://www.paypal.me/dbilgili"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbilgili%2Fcustom-reactjs-dropdown-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbilgili%2Fcustom-reactjs-dropdown-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbilgili%2Fcustom-reactjs-dropdown-components/lists"}