{"id":21693147,"url":"https://github.com/dmitriigaidarji/react-select","last_synced_at":"2026-05-13T05:43:03.564Z","repository":{"id":35075859,"uuid":"203913793","full_name":"dmitriigaidarji/react-select","owner":"dmitriigaidarji","description":"Simple multi selection dropdown for React","archived":false,"fork":false,"pushed_at":"2023-01-07T08:58:44.000Z","size":5065,"stargazers_count":0,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-24T09:33:15.199Z","etag":null,"topics":["dropdown","multiselectdropdown","react","react-virtualized","typeahead-completions"],"latest_commit_sha":null,"homepage":"https://dmitriigaidarji.github.io/react-select/","language":"TypeScript","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/dmitriigaidarji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-23T03:04:20.000Z","updated_at":"2020-12-19T09:17:16.000Z","dependencies_parsed_at":"2023-01-15T13:30:19.881Z","dependency_job_id":null,"html_url":"https://github.com/dmitriigaidarji/react-select","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriigaidarji%2Freact-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriigaidarji%2Freact-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriigaidarji%2Freact-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriigaidarji%2Freact-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitriigaidarji","download_url":"https://codeload.github.com/dmitriigaidarji/react-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244623423,"owners_count":20483137,"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","multiselectdropdown","react","react-virtualized","typeahead-completions"],"created_at":"2024-11-25T18:18:38.274Z","updated_at":"2026-05-13T05:43:03.530Z","avatar_url":"https://github.com/dmitriigaidarji.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Select\n\nA react dropdown multiselect component powered by \u003ca href='https://github.com/bvaughn/react-virtualized'\u003ereact-virtualized\u003c/a\u003e for ability to display a long list of values\n\n### Installation\n\n```yarn add @dmitriig/react-select```\n### Props\n```typescript\n// Options should be provided as {value,label} pairs \nexport interface IItem {\n  value: number,\n  label: string\n}\n\n// Component props\nexport interface IReactSelectProps {\n  // possible options\n  options: IItem[],\n  // string placeholder\n  placeholder: string,\n  // callback on selection change\n  onChange: (items: IItem[]) =\u003e void,\n  // custom cell renderer\n  rowRenderer?: (item: any, index: number) =\u003e void,\n  // custom container style\n  style?: any,\n  // custom input style\n  inputStyle?: any,\n  // custom list dropdown style\n  listStyle?: any,\n  // custom list row height\n  listRowHeight?: number,\n  // custom input font size\n  inputFontSize?: number,\n  // custom message for no search results\n  noResultsMessage?: string\n  // controlled selection array\n  selection?: IItem[]\n}\n```\n\n### Usage\n##### Basic\n```typescript\n// Format data into value and label pair\nconst options = [];\nfor (let i = 0; i \u003c 10000; i++) {\n  options.push({\n    value: i,\n    label: Math.random().toString(36).substring(7)\n  })\n}\n\nreturn \u003cReactSelect options={options} placeholder=\"Select something..\"\n                 onChange={(items)=\u003econsole.log(items)}/\u003e\n```\n\nDemo: https://codesandbox.io/embed/hopeful-jang-zzv8e?fontsize=14\n\n##### Controlled\n```javascript\nfunction Controlled(props) {\n  const {options} = props;\n  // use an initial selection\n  const [selection] = React.useState(options.slice(0, index));\n  const [flag, setFlag] = React.useState(false);\n\n  // dynamically update the selection  \n  function handleAdd() {\n    selection.push(options[index++]);\n    setFlag(!flag);\n  }\n\n  // dynamically update the selection\n  function handleRemove() {\n    selection.splice(0, 1);\n    setFlag(!flag);\n  }\n\n  return \u003cdiv style={{padding: '20px 20px'}}\u003e\n    \u003cdiv\u003e\n      \u003cdiv style={styles.button} onClick={handleAdd}\u003e\n        Add a token\n      \u003c/div\u003e\n      \u003cdiv style={styles.button} onClick={handleRemove}\u003e\n        Remove a token\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cReactSelect options={options} placeholder=\"Select something..\" selection={selection}\n                 onChange={action('changed')}/\u003e\n  \u003c/div\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriigaidarji%2Freact-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitriigaidarji%2Freact-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriigaidarji%2Freact-select/lists"}