@zegal/react-inline-suggest

React Inline Suggest

React component for a search input inline suggestions.

Features

• Inline suggestion displayed in fancy way
• Support simple arrays and complex arrays with objects
• Accept value on Enter/Tab/Right Arrow click
• Switch between suggestions using UP/Down Arrow
• You decide when to render suggestion (eg. when user types 3 or more characters)

Installation

yarn add react-inline-suggest

or

npm install react-inline-suggest --save

Demo and examples

Live demo

Basic usage

Use InlineSuggest with complex array

import { InlineSuggest } from 'react-inline-suggest';

const users = [
  {
    id: 1,
    username: 'xmazu',
    email: '[e-mail]'
  },
  {
    id: 2,
    username: 'adam_tombleson',
    email: '[e-mail]'
  }
];

class ExampleApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ''
    };
  }

  render() {
    return (
      <InlineSuggest
        suggestions={users}
        value={this.state.value}
        onChange={this.onChangeValue}
        onMatch={v => console.log(v)}
        ignoreCase={false}
      />
    );
  }

  onChangeValue = e => {
    this.setState({ value: e.currentTarget.value });
  }
}

Props

Component extends React.HTMLProps<HTMLInputElement> interface and adds some own props.

Property	Type	Default	Required	Description
value	any	undefined	yes	initial field value
suggestions	array	undefined	yes	Array of available items to search in. Items can take an arbitrary shape.
onChange	func	undefined	yes	onChange handler: function(e: React.FormEvent) {}
onMatch	func	undefined		Called when Tab/Enter/Right Arrow pressed or value matches fully
getFn	func	undefined		Used to read the display value from each entry in suggestions: function(item: any): string {}
ignoreCase	boolean	true		Determines whether the case-sensitivity is relevant
shouldRenderSuggestion	func	undefined		When typing, this function will be called to consult when to render the suggestion. function(value: any): boolean {}
switchBetweenSuggestions	boolean	false		Set it to true if you would like to switch between suggestions using Up/Down arrows
placeholder	string	undefined		Input placeholder text

Typings

If you are using TypeScript, you don't have to install typings - they are provided in the npm package.

Development

yarn
yarn start

Now, open http://localhost:8080 and start hacking!

License

MIT