React-autosuggest-inside-input NPM

React Autosuggest Inside Input

This package is a simple React component that provide autosuggest feature inside an input like below. It is inspired by the browser's address bar.

Demo

Installation

To install, you can use npm or yarn:

npm

npm install react-autosuggest-inside-input

yarn

yarn add react-autosuggest-inside-input

Usage example

import AutoSuggestInsideInput from "react-autosuggest-inside-input";
import { useState } from "react";

const suggestions = ["www.google.com", "www.github.com", "www.npmjs.com"];

function App() {
  const [value, setValue] = useState("");
  return (
    <AutoSuggestInsideInput
      suggestions={suggestions}
      value={value}
      setValue={setValue}
    />
  );
}

Props

Name	Type	Optional	Description
suggestions	string array	false	List of suggestions, the input will show the the first match of this array
value	string	false	Input value
setValue	(newValue) => void	false	Callback to set the value
className	String	true	Class name to style the input