Skip to content

React component to create an autocomplete input with multiple completions

License

Notifications You must be signed in to change notification settings

thomasrogerlux/react-multi-autocomplete

Repository files navigation

React Multi Autocomplete

CI Actions Status

Installation

yarn add react-multi-autocomplete

or if you use npm

npm install --save react-multi-autocomplete

Usage

import React from "react";
import Autocomplete from "react-multi-autocomplete";

const Form = () => {
    const onSubmit = input => {
        // Logic
    };

    return (
        <Autocomplete
            onSubmit={onSubmit}
            autocompletions={{
                "@": ["John", "Lisa", "Matt"],
                "#": ["Outdoor", "Food", "Gaming"],
            }}
        >
            <Autocomplete.input placeholder="What did you do today?" />
            <Autocomplete.listItem
                highlightedStyle={{
                    backgroundColor: "#EEEEEE",
                }}
            />
        </Autocomplete>
    );
};

Development

Workflow

yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Storybook

yarn storybook

This loads the stories from ./stories.

Tests

Tests are setup with Jest

yarn test

Build

yarn build

License

MIT © thomasrogerlux

About

React component to create an autocomplete input with multiple completions

Topics

Resources

License

Stars

Watchers

Forks