README

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

npm install react-inline-suggest --save

Include react-inline-suggest.css from node_modules/react-inline-suggest/dist in your project.

Demo and examples

Live demo: xmazu.github.io/react-inline-suggest

Basic usage

Use InlineSuggest with complex array

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

const users = [
  {
    id: 1,
    username: 'xmazu',
    email: 'xmazu@yahoo.com'
  },
  {
    id: 2,
    username: 'john_doe',
    email: 'john@doe.com'
  }
];

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

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

  render() {
    return (
      <InlineSuggest 
        haystack={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
haystack	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 haystack: 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

Typings

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

Development

yarn
yarn start

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

License

MIT

react-inline-suggest-extended

Usage no npm install needed!