react-inline-autocomplete v1.0.5

React Inline Autocomplete

Installation

yarn add react-inline-autocomplete

or

npm install react-inline-autocomplete --save

Remember to import react-inline-autocomplete/dist/index.css to your project.

Demo

Live demo: Protal

How to use

import InlineAutocomplete from 'react-inline-autocomplete';
import { DataSourceItem } from 'react-inline-autocomplete/dist';
import 'react-inline-autocomplete/dist/index.css';

const dataSource: DataSourceItem[] = [
  {
    text: 'Amazon',
    value: 'Amazon',
  },
  {
    text: 'Google',
    value: 'Google',
  },
  {
    text: 'Google Search',
    value: 'GoogleSearch',
  },
  {
    text: 'Apple',
    value: 'Apple',
  },
  {
    text: 'Apple Pencil',
    value: 'ApplePencil',
  },
  {
    text: 'Apple Watch',
    value: 'AppleWatch',
  },
  {
    text: 'Apple Power',
    value: 'ApplePower',
  },
];

function App() {
  const ref = React.createRef<HTMLInputElement>();
  const focus = () => {
    ref.current!.focus();
  };
  const onChange = (value: string) => {};
  const onPressEnter = (value: string) => {};
  const onSelect = (item: DataSourceItem) => {};

  return (
    <InlineAutocomplete
      ref={ref}
      className="inline-autocomplete-example"
      dataSource={dataSource}
      caseSensitive={false}
      onChange={onChange}
      onConfirm={onPressEnter}
      onSelect={onSelect}
    ></InlineAutocomplete>
  );
}

Props

Development

yarn
yarn dev

cd example
yarn
yarn start

Open http://localhost:3000.

Build & Publish

yarn
yarn build
npm publish

cd example
yarn
yarn build
cd ..
yarn deploy

License

MIT