react-multi-autosuggest v1.3.1

React Multi AutoSuggest

Installation

yarn add react-multi-autosuggest

or if you use npm

npm install --save react-multi-autosuggest

Usage

Simple usage

import React from "react";
import AutoSuggest from "react-multi-autosuggest";

const Form = () => {
  const [value, setValue] = useState("");

  const onSubmit = () => {
    // Your logic
  };

  return (
    <form onSubmit={onSubmit}>
      <AutoSuggest
        suggestions={{
          "@": ["John", "Lisa", "Matt"],
          "#": ["Outdoor", "Food", "Gaming"]
        }}
        value={value}
        onChange={setValue}
      />
    </form>
  );
};

Usage with another component library

Simple example with Material UI

import React from "react";
import AutoSuggest from "react-multi-autosuggest";
import TextField from "@material-ui/core/TextField";
import Card from "@material-ui/core/Card";
import MenuItem from "@material-ui/core/MenuItem";

const Form = () => {
  const [value, setValue] = useState("");

  const onSubmit = () => {
    // Your logic
  };

  return (
    <form onSubmit={onSubmit}>
      <AutoSuggest
        suggestions={{
          "@": ["John", "Lisa", "Matt"],
          "#": ["Outdoor", "Food", "Gaming"]
        }}
        value={value}
        onChange={setValue}
        renderInput={({ getInputProps, ref, value, onChange }) => (
          <TextField
            {...getInputProps()}
            value={value}
            onChange={event => onChange(event.target.value)}
            inputRef={ref}
          />
        )}
        renderList={({
          getMenuProps,
          getItemProps,
          getItemStyles,
          isOpen,
          items,
          highlightedIndex
        }) => (
          <Card {...getMenuProps()}>
            {isOpen &&
              items.map((item, index) => (
                <MenuItem
                  {...getItemProps({ item, index })}
                  key={`${index}-${item}`}
                  style={getItemStyles({
                    highlighted: highlightedIndex === index
                  })}
                >
                  {item}
                </MenuItem>
              ))}
          </Card>
        )}
      />
    </form>
  );
};

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