README

react-suggestbar

A simple searchbar with suggestion as you type

Summary

Installing

$ npm install react-suggestbar

Description

It's a simple component that shows you suggestions as you type.

The suggestions are hidden when the focus is no longer contains in the <div/> container.

The user can use them to autocomplete the <input/>.

Usage

import React from "react";
import SuggestBar from "react-suggestbar";

const fruits = [
    "apple",
    "apricot",
    "banana",
    "blackberry",
    "blueberry",
    ...
];

function Component() {
    const [suggestions, setSuggestions] = useState([]);
    const [search, setSearch] = useState("");

    const change = (evt) => {
        let value = evt.target.value;

        setSearch(value);
        if (value === "") {
            setSuggestions([]);
        } else {
            setSuggestions(fruits.filter((fruit) => fruit.startsWith(value)));
        }
    };

    const submit = () => {
        console.log(`Submit: ${search}`);
        setSearch("");
    };

    const click = (suggestion) => {
        console.log(`Accept suggestion: ${suggestion}`);
        setSearch("");
    };

    return (
        <SuggestBar
            inputValue={search}
            onInputChange={change}
            onInputSubmit={submit}
            suggestData={suggestions}
            onSuggestClick={click}
        />
    );
}

export default Component;

Props

name	required	type	default	description
inputValue	yes	any		The `value` attribute of the `<input/>`
inputType	no	string	`"text"`	The `type` attribute of the `<input/>`
inputPlaceholder	no	string	`""`	The `placeholder` attribute of the `<input/>`
onInputChange	yes	(event: React.ChangeEvent) => void		The event handler for the `onChange` event listener of the `<input/>`
onInputSubmit	yes	VoidFunction		The event handler for the `onSubmit` event listener of the `<input/>` and the `<button/>`
submitBtn	no	React.ReactNode	`"Ok"`	The content (children) of the `<button/>`
suggestData	yes	string[]		The list of suggestions the suggestbar must show
onSuggestClick	yes	(suggestion: string) => void		The event handler for the `onClick` event listener of each suggestion
containerClassName	no	string		A CSS className for the `<div/>` container
inputClassName	no	string		A CSS className for the `<input/>`
submitBtnClassName	no	string		A CSS className for the submit `<button/>`
suggestContainerClassName	no	string		A CSS className for the `<div/>` container of the suggestions
suggestClassName	no	string		A CSS className for each suggestion (`<button/>`)

LICENSE

MIT

Usage no npm install needed!