{"id":16736325,"url":"https://github.com/nutboltu/react-search-field","last_synced_at":"2025-04-06T03:08:21.669Z","repository":{"id":28340744,"uuid":"118052532","full_name":"nutboltu/react-search-field","owner":"nutboltu","description":"An elegant search field component for React. ","archived":false,"fork":false,"pushed_at":"2023-07-05T14:36:40.000Z","size":3028,"stargazers_count":82,"open_issues_count":12,"forks_count":93,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T02:05:11.534Z","etag":null,"topics":["react","react-search","react-search-component","search-bar","search-field-list"],"latest_commit_sha":null,"homepage":"https://nutboltu.github.io/react-search-field","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/nutboltu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"nutboltu"}},"created_at":"2018-01-18T23:52:25.000Z","updated_at":"2025-01-13T21:47:58.000Z","dependencies_parsed_at":"2024-06-18T15:27:40.024Z","dependency_job_id":"1af08b9d-0db4-448f-99d6-a8ceaa803773","html_url":"https://github.com/nutboltu/react-search-field","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutboltu%2Freact-search-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutboltu%2Freact-search-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutboltu%2Freact-search-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutboltu%2Freact-search-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nutboltu","download_url":"https://codeload.github.com/nutboltu/react-search-field/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"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":["react","react-search","react-search-component","search-bar","search-field-list"],"created_at":"2024-10-13T00:09:02.920Z","updated_at":"2025-04-06T03:08:21.639Z","avatar_url":"https://github.com/nutboltu.png","language":"JavaScript","funding_links":["https://github.com/sponsors/nutboltu"],"categories":[],"sub_categories":[],"readme":"# React Search Field\n\n[![dependencies Status](https://david-dm.org/nutboltu/react-search-field/status.svg)](https://david-dm.org/nutboltu/react-search-field)  [![Actions Status](https://github.com/nutboltu/react-search-field/workflows/Package%20CI/badge.svg)](https://github.com/nutboltu/react-search-field/actions)\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=nutboltu\"\u003e\n   \u003cimg src=\"https://img.shields.io/twitter/follow/nutboltu.svg?label=Follow%20@nutboltu\" alt=\"Follow @nutboltu\" /\u003e\n\u003c/a\u003e\n\n[![NPM](https://nodei.co/npm/react-search-field.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-search-field/)\n\nAn elegant search field component for React.\n\nSee [Demo and Documentation]( https://nutboltu.github.io/react-search-field/).\n\n![Screenshot](/docs/react-search-field.png)\n\n## Props\n\nThe component takes the following props.\n\n| Prop              | Type       | Description |\n|-------------------|------------|-------------|\n| `classNames`         | string  | Additional classnames for the component |\n| `searchText`  | string  | Initial search value of the input |\n| `placeholder`  | string  | placeholder for the search input |\n| `disabled`  | boolean  | Disabling the search input |\n| `onChange`        | _function_ | Callback function to invoke when the user press any key. The function  should contain two parameters(value, event). |\n| `onEnter`         | _function_ | Callback function to invoke when the user press enter after pressing few keys. The function  should contain two parameters(value, event). |\n| `onSearchClick`          | _function_ | Callback function to invoke when the user click the search button. The function  should contain one parameter(value). |\n| `onBlur`          | _function_ | Callback function to invoke when the user blurs the search box. The function  should contain two parameters(value, event). |\n\n## Installation\n\n```bash\nnpm install react-search-field --save\n```\n\n## Usage\n\n```javascript\nimport SearchField from \"react-search-field\";\n\n\u003cSearchField\n  placeholder=\"Search...\"\n  onChange={onChange}\n  searchText=\"This is initial search text\"\n  classNames=\"test-class\"\n/\u003e\n```\n\n## Run\n\n```bash\nnpm start\n```\n\n## License\n\nMIT Licensed. Copyright (c) Farhad Yasir 2021.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnutboltu%2Freact-search-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnutboltu%2Freact-search-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnutboltu%2Freact-search-field/lists"}