Ninja Programmers Mindmeld

    react-autosuggest-inside-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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

    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

    Install

    npm i react-autosuggest-inside-input

    DownloadsWeekly Downloads

    40

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    9 kB

    Total Files

    5

    Last publish

    Collaborators

    • anduscheung