Mix Tag Input

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

Try place caret anywhere in text and add tag

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} />

Example 1: Customizable Tags

Example 2: Render Custom Component

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