mirror of
https://github.com/strapi/strapi.git
synced 2025-11-02 02:44:55 +00:00
Merge pull request #10927 from strapi/ds-migration/search-docs
[v4] add simple documentation for search component
This commit is contained in:
commit
eacc35eaa1
@ -0,0 +1,38 @@
|
||||
<!--- Search.stories.mdx --->
|
||||
|
||||
import { ArgsTable, Meta } from '@storybook/addon-docs';
|
||||
import Search from './index';
|
||||
|
||||
<Meta title="components/Search" />
|
||||
|
||||
# Search
|
||||
|
||||
This component provides and input to search an array
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import { Search, useQueryParams } from '@strapi/helper-plugin';
|
||||
import matchSorter from 'match-sorter';
|
||||
|
||||
const HomePage = () => {
|
||||
const [{ query }] = useQueryParams()
|
||||
const _q = query?._q || ''
|
||||
const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}]
|
||||
|
||||
const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']})
|
||||
const itemsList = sortedList?.length ? sortedList : items
|
||||
|
||||
return (
|
||||
<Search />
|
||||
{itemsList.map(item => (
|
||||
<div>
|
||||
<h1>{item.name}</h1>
|
||||
<p>{item.instrument}</p>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
<ArgsTable of={Search} />
|
||||
Loading…
x
Reference in New Issue
Block a user