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

Property	Type	Default	Required	Description
value	string	undefined	no	input value
dataSource	DataSourceItem	[]	yes	Array of available items to search.
className	string	""	yes
style	React.CSSProperties	undefined	no
placeholder	string	undefined	no
disabled	boolean	false	no	Whether to disable, the default is false.
caseSensitive	boolean	true	no
navigate	boolean	true	no	You can switch auto-complete when navigate is true.
onBlur	() => void	undefined	no	onBlur handler
onFocus	() => void	undefined	no	onFocus handler
onChange	(value: string) => void	undefined	no	onChange handler
onPressEnter	(value: string) => void	undefined	no	onPressEnter handler(called when you press Enter)
onSelect	(item: DataSourceItem) => void	undefined	no	onSelect handler(called when you press Tab)

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