A React input field component that tokenizes and autocompletes the input.
npm install @quicksilver0218/react-tokenized-input
npm i @quicksilver0218/react-tokenized-input
Usage
ts
import TokenizedInput, { Token } from "@quicksilver0218/react-tokenized-input";const MyComponent = (/ ... /) => {
const [tokens, setTokens] = useState([]);
// ...
return (
// ...
setTokens={setTokens}
data={}
lists={[
{
trigger: / ... /,
items: / ... /,
},
// more lists go here...
]}
suggestionListComponent={}
suggestionComponent={}
multiline
caseSensitive
missingDataText={}
missingDataStyle={}
// input or textarea props...
/>
// ...
);
};
`$3
ts
interface TokenWithKey { key: string }type Token = string | TokenWithKey;
type TokenData = {
displayText: string;
style?: CSSProperties;
suggestionProps?: T;
};
type SuggestionComponentProps = {
tokenKey: string;
displayText: string;
suggestionProps?: T;
hover: boolean;
onMouseEnter: () => void;
onMouseDown: () => void;
onSelect: () => void;
};
`$3
| Property | Type | Description |
| --- | --- | --- |
| tokens | Token[] | The tokens. |
| setTokens | Dispatch> | The setting tokens action dispatcher.
| data | { [key: string]: TokenData\ } | The dictionary of all tokens.
| lists | Array | The suggestion lists.
| lists[].trigger? | RegExp | The triggering condition of showing the suggestions in the list. Default .
| lists[].items | string[] | The key of the suggestion tokens in the list.
| suggestionListComponent? | ElementType>> | The suggestion list component. A default component will be used if it is not given.
| suggestionComponent? | ComponentType> | The suggestion list item component. A default component will be used if it is not given.
| multiline? | boolean | If true, textarea will be used. Otherwise, input will be used. Default false.
| caseSensitive? | boolean | If true, the input will be matched with the token display text in case-sensitive mode. Otherwise, they are matched in case-insensitive mode. Default false.
| missingDataText? | string | The text to be shown when the key of a token does not exist in data. Default "{missing}".
| missingDataStyle? | CSSProperties | The style to be applied on missingDataText. Default { color: "red", textDecoration: "red wavy underline" }`.