mantine-tag-input - npm Package Compare versions

Comparing version 0.0.13 to 1.0.0

dist/index.d.ts

@@ -1,1 +0,3 @@
-export * from './component/index'
+export * from './mantine-tag-input';
+export * from './mantine-tag-input.styles';
+//# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "mantine-tag-input",
   "private": false,
-  "version": "0.0.13",
+  "version": "1.0.0",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
-    "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
-    "prepare": "husky install"
-  },
   "husky": {
@@ -27,7 +18,8 @@ "hooks": {
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "exports": {
     ".": {
-      "import": "./dist/mantine-tag-input.es.js",
+      "import": "./dist/mantine-tag-input.js",
       "require": "./dist/mantine-tag-input.umd.cjs"
@@ -38,3 +30,3 @@ },
   "main": "./dist/mantine-tag-input.umd.cjs",
-  "module": "./dist/mantine-tag-input.es.js",
+  "module": "./dist/mantine-tag-input.js",
   "types": "./dist/index.d.ts",
@@ -68,7 +60,7 @@ "devDependencies": {
   "peerDependencies": {
-    "react": "16.8.0 || >=17.x",
-    "react-dom": "16.8.0 || >=17.x",
+    "@emotion/react": "^11.11.1",
     "@mantine/core": "^6.0.16",
     "@mantine/hooks": "^6.0.16",
-    "@emotion/react": "^11.11.1"
+    "react": "16.8.0 || >=17.x",
+    "react-dom": "16.8.0 || >=17.x"
   },
@@ -95,4 +87,13 @@ "repository": {
     "@mantine/core": "^6.0.16",
-    "@mantine/hooks": "^6.0.16"
+    "@mantine/hooks": "^6.0.16",
+    "mantine-tag-input": "link:"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
+    "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc"
   }
-}
+}

README.md

@@ -0,4 +1,182 @@
+# mantine-tag-input
+A react tag input built on mantine component library and it adapts well with the theme of the library.
+
 [![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)
 
-# mantine-tag-input
-A react tag input built on mantine component library
+
+![Mantine Tag Input](./src/tag-input-demo.gif)
+
+
+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
+-----
+
+### name (optional)
+
+*   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.
+
+### placeHolder (optional)
+
+*   Type: `string`
+*   Default: `undefined`
+
+The `placeHolder` prop defines the placeholder text that appears in the input field when no tags are present.
+
+### value (optional)
+
+*   Type: `string[]`
+*   Default: `[]`
+
+The `value` prop accepts an array of strings representing the initial tags to be displayed in the input field.
+
+### onChange (optional)
+
+*   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.
+
+### onBlur (optional)
+
+*   Type: `any`
+*   Default: `undefined`
+
+The `onBlur` prop allows you to define a function that is called when the input field loses focus.
+
+### separators (optional)
+
+*   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.
+
+### disableBackspaceRemove (optional)
+
+*   Type: `boolean`
+*   Default: `false`
+
+The `disableBackspaceRemove` prop, when set to `true`, prevents the removal of tags by pressing the Backspace key.
+
+### onExisting (optional)
+
+*   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.
+
+### onRemoved (optional)
+
+*   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.
+
+### disabled (optional)
+
+*   Type: `boolean`
+*   Default: `false`
+
+The `disabled` prop, when set to `true`, disables the input field and prevents any further interaction with the component.
+
+### isEditOnRemove (optional)
+
+*   Type: `boolean`
+*   Default: `false`
+
+The `isEditOnRemove` prop, when set to `true`, allows users to edit tags after they have been added.
+
+### beforeAddValidate (optional)
+
+*   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).
+
+### onKeyUp (optional)
+
+*   Type: `(e: React.KeyboardEvent<HTMLInputElement>) => void`
+*   Default: `undefined`
+
+The `onKeyUp` prop is a callback function that is triggered when a key is released within the input field.
+
+### size (optional)
+
+*   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'`.
+
+### error (optional)
+
+*   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.
+
+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 (
+    <MantineTagsInput
+      name="tags"
+      placeHolder="Enter tags..."
+      value={['tag1', 'tag2', 'tag3']}
+      onChange={handleTagChange}
+      onRemoved={handleTagRemove}
+      separators={[' ', ',']}
+      disableBackspaceRemove={true}
+      isEditOnRemove={true}
+    />
+  );
+};
+```
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

250204

increased by453.4%

Number of package files

17

increased by41.67%

Lines of code

1155

increased by41.54%

Number of lines in readme file

183

increased by3560%

Worsened metrics

Dependency count

9

increased by12.5%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

8

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmantine-tag-input@link: