{"id":23885609,"url":"https://github.com/enkidevs/react-search-input","last_synced_at":"2025-05-16T18:06:44.189Z","repository":{"id":32052281,"uuid":"35623938","full_name":"enkidevs/react-search-input","owner":"enkidevs","description":":mag: Simple react.js component for a search input, providing a filter function.","archived":false,"fork":false,"pushed_at":"2019-07-24T14:09:41.000Z","size":76,"stargazers_count":301,"open_issues_count":10,"forks_count":72,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-16T18:06:33.704Z","etag":null,"topics":["component","filter","react","search"],"latest_commit_sha":null,"homepage":"","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/enkidevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-14T16:58:00.000Z","updated_at":"2025-05-15T10:25:28.000Z","dependencies_parsed_at":"2022-08-27T13:11:45.258Z","dependency_job_id":null,"html_url":"https://github.com/enkidevs/react-search-input","commit_stats":null,"previous_names":["enki-com/react-search-input"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkidevs%2Freact-search-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkidevs%2Freact-search-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkidevs%2Freact-search-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkidevs%2Freact-search-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enkidevs","download_url":"https://codeload.github.com/enkidevs/react-search-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582905,"owners_count":22095518,"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":["component","filter","react","search"],"created_at":"2025-01-04T05:45:25.722Z","updated_at":"2025-05-16T18:06:44.166Z","avatar_url":"https://github.com/enkidevs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-search-input\n[![build status](https://img.shields.io/travis/enkidevs/react-search-input/master.svg?style=flat-square)](https://travis-ci.org/enkidevs/react-search-input)\n[![npm version](https://img.shields.io/npm/v/react-search-input.svg?style=flat-square)](https://www.npmjs.com/package/react-search-input)\n[![Dependency Status](https://david-dm.org/enkidevs/react-search-input.svg)](https://david-dm.org/enkidevs/react-search-input)\n[![devDependency Status](https://david-dm.org/enkidevs/react-search-input/dev-status.svg)](https://david-dm.org/enkidevs/react-search-input#info=devDependencies)\n\n\u003e Simple [React](http://facebook.github.io/react/index.html) component for a search input, providing a filter function.\n\n### [Demo](https://enkidevs.github.io/react-search-input)\n\n## Install\n\n```bash\nnpm install react-search-input --save\n```\n\n## Example\n\n```javascript\nimport React, {Component} from 'react'\nimport SearchInput, {createFilter} from 'react-search-input'\n\nimport emails from './mails'\n\nconst KEYS_TO_FILTERS = ['user.name', 'subject', 'dest.name']\n\nclass App extends Component {\n  constructor (props) {\n    super(props)\n    this.state = {\n      searchTerm: ''\n    }\n    this.searchUpdated = this.searchUpdated.bind(this)\n  }\n\n  render () {\n    const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))\n\n    return (\n      \u003cdiv\u003e\n        \u003cSearchInput className=\"search-input\" onChange={this.searchUpdated} /\u003e\n        {filteredEmails.map(email =\u003e {\n          return (\n            \u003cdiv className=\"mail\" key={email.id}\u003e\n              \u003cdiv className=\"from\"\u003e{email.user.name}\u003c/div\u003e\n              \u003cdiv className=\"subject\"\u003e{email.subject}\u003c/div\u003e\n            \u003c/div\u003e\n          )\n        })}\n      \u003c/div\u003e\n    )\n  }\n\n  searchUpdated (term) {\n    this.setState({searchTerm: term})\n  }\n}\n\n```\n\n## API\n\n### Props\n\nAll props are optional. All other props will be passed to the DOM input.\n\n##### className\n\nClass of the Component (in addition of `search-input`).\n\n##### onChange\n\nFunction called when the search term is changed (will be passed as an argument).\n\n##### filterKeys\n\nEither an `[String]` or a `String`. Will be use by the `filter` method if no argument is passed there.\n\n##### throttle\n\nReduce call frequency to the `onChange` function (in ms). Default is `200`.\n\n##### caseSensitive\n\nDefine if the search should be case sensitive. Default is `false`\n\n##### fuzzy\n\nDefine if the search should be fuzzy. Default is `false`\n\n##### sortResults\n\nDefine if search results should be sorted by relevance (only works with fuzzy search). Default is `false`\n\n##### value\n\nDefine the value of the input.\n\n### Methods\n\n##### filter([keys])\n\nReturn a function which can be used to filter an array. `keys` can be `String`, `[String]` or `null`.\n\nIf an array `keys` is an array, the function will return true if at least one of the keys of the item matches the search term.\n\n### Static Methods\n\n##### filter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])\n\nReturn a function which can be used to filter an array. `searchTerm` can be a `regex` or a `String`. `keys` can be `String`, `[String]` or `null`.\n\nIf an array `keys` is an array, the function will return true if at least one of the keys of the item matches the search term.\n\n## Styles\n\nLook at [react-search-input.css](react-search-input.css) for an idea on how to style this component.\n\n---\n\nMIT Licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenkidevs%2Freact-search-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenkidevs%2Freact-search-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenkidevs%2Freact-search-input/lists"}