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: '[email protected]'
  },
  {
    id: 2,
    username: 'adam_tombleson',
    email: '[email protected]'
  }
];

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