wix-style-react/src/Search/docs/Search.demo.js

wix-style-react

import React from 'react';
import Search from '..';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';

export default () => {
  const [text, setText] = React.useState('');

  const options = [
    { value: 'Option 1', id: 0 },
    { value: 'Option 2', id: 1 },
    { value: 'Option 3', id: 2 },
    { value: 'Option 4', id: 3 },
    { value: 'Option 5', id: 4 },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column" width="50%">
      <Search
        value={text}
        onChange={e => setText(e.target.value)}
        onClear={() => setText('')}
        options={options}
        onSelect={option => setText(option.value)}
      />
    </StorybookComponents.Stack>
  );
};