mantine-tag-input

A react tag input built on mantine component library and it adapts well with the theme of the library.


!Mantine Tag Input

Installation
------------

To start using mantine Tag Input in your React project, follow these simple steps:

1. Install the package via npm or yarn:

bash

``bash
npm install mantine-tag-input
`

or

bash

`bash
yarn add mantine-tag-input
`
or

bash

`bash
pnpm add mantine-tag-input
`
2. Import the component in your desired file:

javascript

`javascript
import { TagsInput } from 'mantine-tag-input';
`

Props
-----

$3

* Type: string
* Default: undefined

The name prop allows you to specify the name attribute for the input field. This can be useful for form submission or accessing the input value via JavaScript.

$3

* Type: string
* Default: undefined

The placeHolder prop defines the placeholder text that appears in the input field when no tags are present.

$3

* Type: string[]
* Default: []

The value prop accepts an array of strings representing the initial tags to be displayed in the input field.

$3

* Type: (tags: string[]) => void
* Default: undefined

The onChange prop is a callback function that is triggered whenever there is a change in the tags. It receives an array of strings representing the updated tags as a parameter.

$3

* Type: any
* Default: undefined

The onBlur prop allows you to define a function that is called when the input field loses focus.

$3

* Type: string[]
* Default: undefined

The separators prop allows you to specify an array of strings that will act as separators for creating multiple tags. By default, the tags are separated by commas.

$3

* Type: boolean
* Default: false

The disableBackspaceRemove prop, when set to true, prevents the removal of tags by pressing the Backspace key.

$3

* Type: (tag: string) => void
* Default: undefined

The onExisting prop is a callback function that is triggered when an existing tag is added. It receives the added tag as a parameter.

$3

* Type: (tag: string) => void
* Default: undefined

The onRemoved prop is a callback function that is triggered when a tag is removed. It receives the removed tag as a parameter.

$3

* Type: boolean
* Default: false

The disabled prop, when set to true, disables the input field and prevents any further interaction with the component.

$3

* Type: boolean
* Default: false

The isEditOnRemove prop, when set to true, allows users to edit tags after they have been added.

$3

* Type: (tag: string, existingTags: string[]) => boolean
* Default: undefined

The beforeAddValidate prop allows you to define a validation function that is called before a tag is added. The function receives the tag to be added and the existing tags as parameters, and should return a boolean value (true to allow the addition and false to prevent it).

$3

* Type: (e: React.KeyboardEvent) => void
* Default: undefined

The onKeyUp prop is a callback function that is triggered when a key is released within the input field.

$3

* Type: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
* Default: undefined

The size prop allows you to specify the size of the input field. It accepts one of the following values: 'xs', 'sm', 'md', 'lg', or 'xl'.

$3

* Type: React.ReactNode
* Default: undefined

The error prop allows you to display an error message below the input field. It accepts a React node as a value.

$3

* Type: BadgeProps
* Default: undefined

The badgeProps prop allows you to pass mantine badge props to the badge component.




$3

* Type: CloseButtonProps
* Default: undefined

The closeButtonProps prop allows you to pass mantine close button props to the close button component.

Example Usage
-------------

`javascript
import { MantineTagsInput } from 'mantine-tag-input';

const MyComponent = () => {
const handleTagChange = (tags) => {
// Handle tag change logic here
};

const handleTagRemove = (tag) => {
// Handle tag removal logic here
};

return (
name="tags"
placeHolder="Enter tags..."
value={['tag1', 'tag2', 'tag3']}
onChange={handleTagChange}
onRemoved={handleTagRemove}
separators={[' ', ',']}
disableBackspaceRemove={true}
isEditOnRemove={true}
/>
);
};
``