react-suggestbar v0.0.1

react-suggestbar

A simple searchbar with suggestion as you type

live demo

source

Summary

• Installing
• Description
• Usage
• Props

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

LICENSE

MIT