Mobin-tag NPM | npm.io

mobin-tag

Simple persian react tag input with React, TypeScript and Tailwindcss.

Installation

npm install mobin-tag

Features

Available props

	Props	Types	Default
1	defaultTags	string[]or data	--------
1	data	function	(date:) => void
2	className	string	--------	optional
3	dropContainerClassName	stirng	--------	optional
4	dropData	(data:)=>	void	optional
5	dropChildren	string		optional
6	dropStyle	React.CSSProperties		optional
6	tagClassName	string		optional
7	tagStyle	React.CSSProperties		optional
8	style	string		optional
9	setting	object		optional
10	mode	object		optional
11	icons	object		optional
12	notfoundText	string		optional
13	placeHolder	string		optional

Advanced Examples

// in _app.tsx file in nextjs project added this
import "mobin-tab/dist/styles.css";

// Add this in the component you want to use
import { Tagilize } from "mobin-tag";

const App = () => {
  return (
    <div>
     <Tagilize
          setting={{
            bkDelete: true,
            passBycomma: true,
            lengthOfTag:6,
            beUnique: true,
            TagsLength:5
            allChartTags:10
          }}
          mode={{
            modeName:'advance',
            ArrayOfSelector:drop,
            defaultLoading: loading,
          }}
          defaultTags={tag}
          icons={{deleteIcon:{style:{border:"0px"}}}}
          icons={{loadingIcon:{icon:faAddressCard,style:{color:"red"},addIcon:{icon:faAmbulance}}}
          tagStyle={{textAlign:'right',direction:'rtl'}}
          tagClassName=" text-[16px]"
          placeHolder="آیتم ها را با Enter از هم جدا کنید."
          className={`tgz-mx-auto !tgz-rounded-xl  tgz-h-2 tgz-py-1 tgz-px-5 !tgz-rounded-b-xl !tgz-w-[80%] focus-within:tgz-border-[#328beb]`}
          notfoundText="پیدا نمیشه"
          style={{direction:'rtl'}}
          dropContainerClassName=" tgz-border-[2px] tgz-rounded-xl   tgz-border-[#328beb]"
          dropChildren=" tgz-mt-4"
          dropStyle={{borderRadius:"10px",backgroundColor:'red'}}
          tagClassName="tgz-rounded-lg"
          dropData={(d) => {
            console.log(d)
          }}
          data={(d) => {
            console.log(d);
          }}
        />
    </div>
  );
};