react-multi-autocomplete

React component to create an autocomplete input with multiple completions

Usage no npm install needed!

<script type="module">
  import reactMultiAutocomplete from 'https://cdn.skypack.dev/react-multi-autocomplete';
</script>

README

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