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.

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 |

Customization

If you think this is what you need but you want some customization, feel free to copy the code directly from this link :).

https://github.com/anduscheung/react-autosuggest-inside-input/blob/main/src/components/AutoSuggestInsideInput.tsx.

License

MIT