Concise and efficient solution for creating tags input with react inline CSS

26 May 2023
0
48

React Tags Input

Concise and efficient solution for creating tags input with option to style with react inline CSS or with css⚡

Installation

Install dependencies:

$ yarn add @enipx/react-tags-input

# or

$ npm i @enipx/react-tags-input

Usage

import { TagsInput } from "@enipx/react-tags-input"

export default function App() {
  return (
    <TagsInput
      value={selected}
      onChange={onChangeHandler}
      style={{
        border: `1px solid rgba(0,0,0,0.2)`,
        minHeight: '70px',
        borderRadius: '10px',
        padding: '0 1rem',
        fontSize: '0.85rem',
        paddingTop: '1rem',
      }}
      focusStyle={{
        border: `1px solid rgba(0,0,0,0.4)`,
      }}
      tagStyle={{
        border: `1px solid ${borderColor}`,
        borderRadius: '2rem',
        paddingLeft: '0.5rem',
        paddingRight: '0.5rem',
      }}
      {...rest}
    />
  )
}

Props

PropertyTypeDescriptionvaluestring[]Controlled valueonChange(arg: string[]) => voidReturn value when input changesonAdd(arg: string) => voidcallback method when an item is addedonRemove(arg: string) => voidcallback method when an item is removeonExist(arg: string) => voidcallback method when an item already exists in inputhoverStyleReact.CSSPropertiesAdd custom input style on hoverfocusStyleReact.CSSPropertiesAdd custom input style on focustagStyleReact.CSSPropertiesAdd custom tag item styleseparatorstringinput item separator, default is comma (,)removeIconReact.ReactNodereplace tag remove iconcontainerPropsHTMLAttributeupdate container div attribute