README
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