React-Tokenized-Input ·

A React input field component that tokenizes and autocompletes the input.

Installation

npm i @quicksilver0218/react-tokenized-input

Usage

import TokenizedInput, { Token } from "@quicksilver0218/react-tokenized-input";

const MyComponent = (/* ... */) => {
  const [tokens, setTokens] = useState<Token[]>([]);
  // ...
  return (
    // ...
    
    <TokenizedInput
      tokens={tokens}
      setTokens={setTokens}
      data={}
      lists={[
        {
          trigger: /* ... */,
          items: /* ... */,
        },
        // more lists go here...
      ]}
      suggestionListComponent={}
      suggestionComponent={}
      multiline
      caseSensitive
      missingDataText={}
      missingDataStyle={}
      // input or textarea props...
    />
    
    // ...
  );
};

Types

interface TokenWithKey { key: string }

type Token = string | TokenWithKey;

type TokenData<T = unknown> = {
  displayText: string;
  style?: CSSProperties;
  suggestionProps?: T;
};

type SuggestionComponentProps<T> = {
  tokenKey: string;
  displayText: string;
  suggestionProps?: T;
  hover: boolean;
  onMouseEnter: () => void;
  onMouseDown: () => void;
  onSelect: () => void;
};

Properties

| Property | Type | Description | | --- | --- | --- | | tokens | Token[] | The tokens. | | setTokens | Dispatch<SetStateAction<Token[]>> | The setting tokens action dispatcher. | data | { [key: string]: TokenData<T> } | 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<PropsWithChildren<RefAttributes<Element>>> | The suggestion list component. A default component will be used if it is not given. | suggestionComponent? | ComponentType<SuggestionComponentProps<T>> | 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" }.

Examples

• Basic: CodeSandbox
• Highly customization with Material UI: CodeSandbox