/react-inline-autocomplete

React Inline Autocomplete for maintainace (update to support newer node & react version)

Primary LanguageTypeScriptMIT LicenseMIT

React Inline Autocomplete

version download license

Installation

# yarn add react-inline-autocomplete old
yarn add https://github.com/HRNPH/react-inline-autocomplete.git

or

# npm install react-inline-autocomplete --save old
npm install https://github.com/HRNPH/react-inline-autocomplete.git --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