{"id":28437132,"url":"https://github.com/codellyson/mantine-tag-input","last_synced_at":"2025-06-27T20:32:21.242Z","repository":{"id":179247845,"uuid":"663173297","full_name":"codellyson/mantine-tag-input","owner":"codellyson","description":"A react tag input built on mantine component library","archived":false,"fork":false,"pushed_at":"2023-08-08T19:40:10.000Z","size":209,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-03T21:14:13.105Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codellyson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-06T18:05:22.000Z","updated_at":"2023-07-06T19:22:17.000Z","dependencies_parsed_at":"2023-09-06T16:54:27.949Z","dependency_job_id":"960f0307-ef01-412e-a293-ad6bd016c051","html_url":"https://github.com/codellyson/mantine-tag-input","commit_stats":null,"previous_names":["dellysn/mantine-tag-input","codellyson/mantine-tag-input"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/codellyson/mantine-tag-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmantine-tag-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmantine-tag-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmantine-tag-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmantine-tag-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codellyson","download_url":"https://codeload.github.com/codellyson/mantine-tag-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmantine-tag-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260549759,"owners_count":23026311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T23:08:58.297Z","updated_at":"2025-06-27T20:32:20.589Z","avatar_url":"https://github.com/codellyson.png","language":"TypeScript","readme":"# mantine-tag-input\nA react tag input built on mantine component library and it adapts well with the theme of the library.\n\n[![Publish package on NPM](https://github.com/Dellysn/mantine-tag-input/actions/workflows/publish.yml/badge.svg)](https://github.com/Dellysn/mantine-tag-input/actions/workflows/publish.yml)\n\n\n![Mantine Tag Input](./src/tag-input-demo.gif)\n\n\nInstallation\n------------\n\nTo start using mantine Tag Input in your React project, follow these simple steps:\n\n1.  Install the package via npm or yarn:\n\nbash\n\n```bash\nnpm install mantine-tag-input\n```\n\nor\n\nbash\n\n```bash\nyarn add mantine-tag-input\n```\nor\n\nbash\n\n```bash\npnpm add mantine-tag-input\n```\n2.  Import the component in your desired file:\n\njavascript\n\n```javascript\nimport { TagsInput } from 'mantine-tag-input';\n```\n\nProps\n-----\n\n### name (optional)\n\n*   Type: `string`\n*   Default: `undefined`\n\nThe `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.\n\n### placeHolder (optional)\n\n*   Type: `string`\n*   Default: `undefined`\n\nThe `placeHolder` prop defines the placeholder text that appears in the input field when no tags are present.\n\n### value (optional)\n\n*   Type: `string[]`\n*   Default: `[]`\n\nThe `value` prop accepts an array of strings representing the initial tags to be displayed in the input field.\n\n### onChange (optional)\n\n*   Type: `(tags: string[]) =\u003e void`\n*   Default: `undefined`\n\nThe `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.\n\n### onBlur (optional)\n\n*   Type: `any`\n*   Default: `undefined`\n\nThe `onBlur` prop allows you to define a function that is called when the input field loses focus.\n\n### separators (optional)\n\n*   Type: `string[]`\n*   Default: `undefined`\n\nThe `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.\n\n### disableBackspaceRemove (optional)\n\n*   Type: `boolean`\n*   Default: `false`\n\nThe `disableBackspaceRemove` prop, when set to `true`, prevents the removal of tags by pressing the Backspace key.\n\n### onExisting (optional)\n\n*   Type: `(tag: string) =\u003e void`\n*   Default: `undefined`\n\nThe `onExisting` prop is a callback function that is triggered when an existing tag is added. It receives the added tag as a parameter.\n\n### onRemoved (optional)\n\n*   Type: `(tag: string) =\u003e void`\n*   Default: `undefined`\n\nThe `onRemoved` prop is a callback function that is triggered when a tag is removed. It receives the removed tag as a parameter.\n\n### disabled (optional)\n\n*   Type: `boolean`\n*   Default: `false`\n\nThe `disabled` prop, when set to `true`, disables the input field and prevents any further interaction with the component.\n\n### isEditOnRemove (optional)\n\n*   Type: `boolean`\n*   Default: `false`\n\nThe `isEditOnRemove` prop, when set to `true`, allows users to edit tags after they have been added.\n\n### beforeAddValidate (optional)\n\n*   Type: `(tag: string, existingTags: string[]) =\u003e boolean`\n*   Default: `undefined`\n\nThe `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).\n\n### onKeyUp (optional)\n\n*   Type: `(e: React.KeyboardEvent\u003cHTMLInputElement\u003e) =\u003e void`\n*   Default: `undefined`\n\nThe `onKeyUp` prop is a callback function that is triggered when a key is released within the input field.\n\n### size (optional)\n\n*   Type: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`\n*   Default: `undefined`\n\nThe `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'`.\n\n### error (optional)\n\n*   Type: `React.ReactNode`\n*   Default: `undefined`\n\nThe `error` prop allows you to display an error message below the input field. It accepts a React node as a value.\n\n### badgeProps (optional)\n\n*   Type: `BadgeProps`\n*   Default: `undefined`\n\nThe `badgeProps` prop allows you to pass mantine badge props to the badge component.\n\n\n### closeButtonProps (optional)\n\n*   Type: `CloseButtonProps`\n*   Default: `undefined`\n\nThe `closeButtonProps` prop allows you to pass mantine close button props to the close button component.\n\nExample Usage\n-------------\n\n```javascript\nimport { MantineTagsInput } from 'mantine-tag-input';\n\nconst MyComponent = () =\u003e {\n  const handleTagChange = (tags) =\u003e {\n    // Handle tag change logic here\n  };\n\n  const handleTagRemove = (tag) =\u003e {\n    // Handle tag removal logic here\n  };\n\n  return (\n    \u003cMantineTagsInput\n      name=\"tags\"\n      placeHolder=\"Enter tags...\"\n      value={['tag1', 'tag2', 'tag3']}\n      onChange={handleTagChange}\n      onRemoved={handleTagRemove}\n      separators={[' ', ',']}\n      disableBackspaceRemove={true}\n      isEditOnRemove={true}\n    /\u003e\n  );\n};\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodellyson%2Fmantine-tag-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodellyson%2Fmantine-tag-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodellyson%2Fmantine-tag-input/lists"}