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>
  );
};

License

Licensed under MIT