React component that enables users to quickly find and select from a pre-populated list

ssuggestor

React component that enables users to quickly find and select from a pre-populated list of values as they type. Currently uses Bootstrap styles.

Instalation

# using yarn
yarn add ssuggestor

# using npm
npm i ssuggestor

Usage

npm

import React from 'react';
import { render } from 'react-dom';
import Suggestor from 'ssuggestor';

render(
    <Suggestor
        list={['suggestion-a', 'suggestion-b', 'suggestion-c', '...', 'suggestion-z']}
        placeholder="write something to display suggestions..."
        onChange={console.log}
        onSelect={(value, suggestion) => console.info(value, suggestion)}
        styles={{ width: 100 }}
        arrow
        close
    />,
    document.body
);

browser

Include react dependencies and ssuggestor scripts:

<script src="https://unpkg.com/react@16.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.0/prop-types.min.js"></script>
<script src="https://unpkg.com/ssuggestor@0.7.0/dist/ssuggestor.min.js"></script>

<!-- bootstrap styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Description

This Simple Suggestor package exports a single React component as the default export:
It handles clicks outside of DOM component in order to close the suggestion list.
All pattern matches are highlighted.

Example:

• input pattern: sugge
• items on suggestion list: autoSuggest, ssüggèstor and suggests

Then,

• matches are case insensitive: autoSuggest
• pattern test is performed removing accents: ssüggèstor

Suggestion Objects

Suggestion objects use requires a selector function to convert each object into string representation which will be displayed on the suggestion list.

Props:

Supported Keys

Up, Down, Enter, Escape & Tab.

Method

One public method for imperative action: focus()

instance.focus(); // focuses the control input

Bootstrap

Used bootstrap classes:

• input-group
• form-control
• dropdown-menu
• glyphicon (*-triangle-bottom, *-remove)

Development

In order to run this project locally clone this repo, restore dependencies and execute dev task:

git clone https://github.com/carloluis/ssuggestor.git
cd ssuggestor
yarn
yarn dev

Open browser on [localhost:9000](http://localhost:9000/)

GitHub