{"id":19493932,"url":"https://github.com/darianstlex/react-sm-select","last_synced_at":"2025-04-25T20:31:28.333Z","repository":{"id":57344957,"uuid":"145486320","full_name":"darianstlex/react-sm-select","owner":"darianstlex","description":"React Multi/Single Select","archived":false,"fork":false,"pushed_at":"2019-10-29T09:56:55.000Z","size":1987,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T03:11:49.797Z","etag":null,"topics":["multiselect","react-multiselect","react-select","select"],"latest_commit_sha":null,"homepage":"https://darianstlex.github.io/react-sm-select","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/darianstlex.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":"2018-08-21T00:52:47.000Z","updated_at":"2024-06-28T16:44:28.000Z","dependencies_parsed_at":"2022-09-16T18:00:21.957Z","dependency_job_id":null,"html_url":"https://github.com/darianstlex/react-sm-select","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darianstlex%2Freact-sm-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darianstlex%2Freact-sm-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darianstlex%2Freact-sm-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darianstlex%2Freact-sm-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darianstlex","download_url":"https://codeload.github.com/darianstlex/react-sm-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250890430,"owners_count":21503492,"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":["multiselect","react-multiselect","react-select","select"],"created_at":"2024-11-10T21:27:55.454Z","updated_at":"2025-04-25T20:31:28.033Z","avatar_url":"https://github.com/darianstlex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub license](https://img.shields.io/github/license/darianstlex/react-sm-select.svg)](https://github.com/darianstlex/react-sm-select/blob/master/LICENSE) [![Hackage-Deps](https://img.shields.io/hackage-deps/v/lens.svg)](https://github.com/darianstlex/react-sm-select) [![Package Quality](http://npm.packagequality.com/shield/react-sm-select.svg)](http://packagequality.com/#?package=react-sm-select) [![CircleCI](https://circleci.com/gh/darianstlex/react-sm-select.svg?style=svg)](https://circleci.com/gh/darianstlex/react-sm-select)\n\n[![NPM](https://nodei.co/npm/react-sm-select.png)](https://nodei.co/npm/react-sm-select/)\n\n\u003e Single/Multi Select React Component\n\n[Demo and Specimens](https://darianstlex.github.io/react-sm-select)\n\n### Installation\n\n```code\nnpm install react-sm-select\n```\n\n### Usage\n\n```code\nimport { MultiSelect } from 'react-sm-select';\nimport 'react-sm-select/dist/styles.css';\n\n.........\n\nstate = {\n  options: [\n    { value: 'red', label: 'Red' },\n    { value: 'blue', label: 'Blue' }\n  ],\n  value: ['blue']\n}\n\n.........\n\n\u003cMultiSelect\n  id=\"some-id\"\n  options={this.state.options}\n  value={this.state.value}\n  onChange={value =\u003e this.setState({ value })}\n/\u003e\n```\n\n### Styling\n\nCan be used css overriding, see compiled css. Or use scss variables for general styling.\n\n```code\n@import 'react-sm-select/dist/variables';\n\n$SM-white: #fff;\n$SM-brightGrey: #ebf5ff;\n$SM-smoothGray: #f3f3f3;\n$SM-lightGrey: #cfd4d9;\n$SM-lightBlue: #1298d4;\n$SM-grey: #949ca6;\n$SM-darkBlue: #143154;\n$SM-shadowBlue: rgba(18,152,212,0.5);\n\n// General Colors\n$SM-backgroundColor: $SM-white;\n$SM-focusColor: $SM-lightBlue;\n$SM-mutedColor: $SM-grey;\n$SM-borderColor: $SM-grey;\n$SM-textColor: $SM-darkBlue;\n\n// Value Colors\n$SM-headerSelectedColor: $SM-shadowBlue;\n$SM-valueColor: $SM-textColor;\n$SM-valuePlaceholderColor: $SM-mutedColor;\n\n$SM-counterColor: $SM-focusColor;\n\n$SM-tagColor: $SM-white;\n$SM-tagBackgroundColor: $SM-focusColor;\n$SM-tagCloseColor: $SM-textColor;\n$SM-tagCloseBackgroundColor: $SM-lightGrey;\n\n// DropDown Arrow\n$SM-dropDownArrowColor: $SM-mutedColor;\n$SM-dropDownActiveArrowColor: $SM-lightBlue;\n\n// Search Colors\n$SM-searchTextColor: $SM-textColor;\n$SM-searchPlaceholderColor: $SM-mutedColor;\n$SM-searchSelectedColor: $SM-shadowBlue;\n\n// Option Colors\n$SM-itemTextColor: $SM-textColor;\n$SM-itemBackgroundHoverColor: $SM-brightGrey;\n$SM-itemBackgroundFocusColor: $SM-smoothGray;\n$SM-dividerColor: $SM-lightGrey;\n$SM-selectAllColor: $SM-itemTextColor;\n\n// Size\n$SM-fieldHeight: 42px;\n$SM-itemHeight: $SM-fieldHeight - 4px;\n$SM-borderRadius: 5px;\n$SM-tagBorderRadius: 3px;\n$SM-dropDownHeight: 300px;\n\n// Other\n$SM-dropDownZIndex: 1;\n\n@import 'react-sm-select/dist/main';\n```\n\n### Props\n\n#### Controls\n\n---\n\n- **`mode: string: 'list'`** Behaviour mode: 'list', 'tags', 'counter', 'single'\n\n- **`options: array`** Array of options to select from: **Required**\n\n```code\n[\n  { value: 'red', label: 'Red' },\n  { value: 'blue', label: 'Blue' }\n]\n```\n\n\n- **`value: array: []`** Array of preselected options:\n\n```code\n[ 'red', 'blue' ]\n```\n\n\n- **`disabled: boolean: false`** Disable component\n\n- **`enableSearch: boolean: false`** Enables search field\n\n- **`id: string`** ID attribute of the container\n\n- **`isLoading: boolean: false`** Shows loading indicator\n\n- **`hasSelectAll: boolean: false`** Shows 'Select All'\n\n- **`maxOptionsToRender: number: undefined`** Max options to render\n\n- **`resetable: boolean: false`** Add delete button to reset value\n\n- **`resetTo: array: []`** Value to be reset to\n\n- **`shouldToggleOnHover: boolean: false`** Toggle drop-down on hover\n\n- **`stopClickPropagation: boolean: false`** Stop Header click event propagation\n\n\n\n#### Labels / Placeholders\n\n---\n\n- **`allSelectedLabel: string: 'All items are selected'`** Label for all selected items\n\n- **`counterLabel: string: undefined`** Value Label for 'counter' mode\n\n- **`searchPlaceholder: string: 'Search'`** Search field placeholder\n\n- **`searchMorePlaceholder: string: 'Search to see more ...'`** If 'maxOptionsToRender' is defined\n\n- **`selectAllLabel: string: 'Select All'`** Select All label\n\n- **`valuePlaceholder: string: 'Select ...'`** Value placeholder\n\n\n\n#### Events\n\n---\n\n- **`onBlur: function`** On Blur:\n\n```code\nonBlur(value) {\n  // value - array of selected values, see 'value' property\n}\n```\n\n\n- **`onChange: function`** On Change:\n\n```code\nonChange(value) {\n  // value - array of selected values, see 'value' property\n}\n```\n\n\n- **`onClose: function`** On Close:\n\n```code\nonClose(value) {\n  // value - array of selected values, see 'value' property\n}\n```\n\n\n\n#### Helpers\n\n---\n\n- **`filterOptions: function`** Filter / Search:\n\n```code\nfilterOptions(options, text) {\n  // options - see 'options' property\n  // text - search string\n  \n  return - array of filtered options\n}\n```\n\n\n\n#### Renderers\n\n---\n\n- **`Arrow: function`** DropDown Arrow:\n\n```code\n({options, value, expanded, hasFocus, disabled}) =\u003e {\n  // options: array - see 'options' prop \n  // value: array - see 'value' property\n  // expanded: boolean - expanded component status\n  // hasFocus: boolean - hasFocus component status\n  // disabled: boolean - disabled component status\n  \n  return - component to render custom Arrow\n}\n```\n\n\n- **`Loading: function`** Loading Indicator:\n\n```code\n() =\u003e {\n  return - component to render custom Loading Indicator\n}\n```\n\n\n- **`Option: function`** Option:\n\n```code\n({checked, option, isSingle}) =\u003e {\n  // option: object - from options props: { value, label }  \n  // checked: boolean - define if option is checked\n  // isSingle: boolean - single selection mode\n  \n  return - component to render custom Option\n}\n```\n\n\n- **`Tag: function`** Tag:\n\n```code\n({label, index, removableTag, onTagRemove}) =\u003e {\n  // label: string - tag label\n  // index: number - tag index in array used in removal \n  // removableTag: boolean - display/hide remove tag button\n  // onTagRemove: function - callback to remove selected tag\n  \n  return - component to render custom Tag\n}\n```\n\n\n- **`Value: function`** Value:\n\n```code\n({value, options}) =\u003e {\n  // options: array - see 'options' property\n  // value: array - see 'value' property\n  \n  return - component to render custom Value\n}\n```\n\n#### Contributing\n\n---\n\nIf you have found an issue or would like to request a new feature, simply create a new issue detailing the request. We also welcome pull requests. See below for information on getting started with development.\n\n#### Development\n\n---\n\nFork, install dependencies\n\n```bash\nyarn\n# or\nnpm install\n```\n\nRun catalog web server at http://localhost:4000/\n\n```bash\nyarn start\n# or\nnpm start\n```\n\nRun unit tests\n\n```bash\nyarn test\n# or\nnpm test\n```\n\nWatch unit tests\n\n```bash\nyarn test:w\n# or\nnpm run test:w\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarianstlex%2Freact-sm-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarianstlex%2Freact-sm-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarianstlex%2Freact-sm-select/lists"}