@arif-un/react-mix-tag-input NPM

React Mix Tag Input

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

Full Documentation

mix tag input example

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](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/react#all-available-props)

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`