import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';
import { Stack } from '@strapi/design-system/Stack';
import matchSorter from 'match-sorter';
import useQueryParams from '../../hooks/useQueryParams';
import SearchURLQuery from './index';
# SearchURLQuery
This component provides and input to search an array
## Imports
```js
import { SearchURLQuery } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
```
## Usage
```jsx
import { SearchURLQuery, useQueryParams } from '@strapi/helper-plugin';
import matchSorter from 'match-sorter';
const HomePage = () => {
const [{ query }] = useQueryParams()
const { formatMessage } = useIntl();
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 (
{itemsList.map(item => (
{item.name}
{item.instrument}
))}
)
};
```
## Base