React Mix Tag Input

A react input component that pairs text with tags, supports multiline entry, and provides customizable tag rendering.

Full Documentation

Installation

npm install @arif-un/react-mix-tag-input

import  MixTagInput  from  "mix-tag-input";

const  [value, setValue]  =  useState<MixInputValues>([
  [ "Text ",  {type:  "tag", attrs:  {id:  "1", label:  "Tag"}} ]
]);

<MixTagInput  value={value}  onChange={handleChange}  />

Props

<MixTagInput />

| Prop | Description | Default | Type | |------|-------------|---------|------| | ref | React forwardRef with options of component | | MixInputRef | | value | Values of Mix Input | [] | MixInputValues | | onChange | Function to handle the change event | | (value: MixInputValues) => void | | disabled | Boolean value to set the input as disabled | false | Boolean | | placeholder | Placeholder text | | string | | immediatelyRender | Boolean value to render the component immediately on mount. Useful for server side rendering | false | Boolean | | tagClassName | Class name for tags | mi-tag | string | | editorOptions | Options for the editor | {} | Editor | | tagAttrs | Allowed attributes for tags, that returns with tag value on change and also render as data-* attribute | | { [key: string]: string } | | tagView | Custom tag view component | | React.FC<TagViewProps> |

MixInputRef: React.forwardRef

import { type MixInputRef } from '@arif-un/react-mix-tag-input';

const ref = useRef<MixInputRef>(null);

// ...
ref.current?.insertContent({ type: 'tag', attrs: { id: '1', label: 'Tag' } });
// ...

return <MixTagInput ref={ref} />;

| Prop | Description | Type | |------|-------------|------| | insertContent | Function to insert content in the editor current caret position, accepts Tag or Text alone or in array | (content: Tag | string | (Tag | string)[]) => void | | element | Returns the editor element | HTMLDivElement | | editor | Returns the editor instance | Editor |

MixInputValues: (string | Tag)[][]

const text =  'Any text string'

const tag:  Tag  =  {
 type:  'tag',
 attrs:  {
   id:  '1',
   label:  'Tag',
   className:  'tag-class',
   style:  {color:  'cyan'}
   [key:  string]:  string  // key and default value need to specify in 'tagAttrs' prop
  },
}

const firstLineValues:  MixInputValues  =  [[ text, tag ]]

return  <MixTagInput  value={firstLineValues}  />;

Tag

| Prop | Description | Type | |------|-------------|------| | type | Type of the tag | 'tag' | | attrs | Attributes of the tag | object | | attrs.id | Unique identifier of the tag | string | | attrs.label | Label of the tag | string | | attrs.className | Class name of the tag | string | | attrs.style | Style of the tag | React.CSSProperties | | attrs.[key: string] | Any other attribute. Key and default value need to specify in tagAttrs prop in order to get back with tag value on change and also render as data-* attribute | string |