@enipx/react-tags-input
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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

Property Type Description
value string[] Controlled value
onChange (arg: string[]) => void Return value when input changes
onAdd (arg: string) => void callback method when an item is added
onRemove (arg: string) => void callback method when an item is remove
onExist (arg: string) => void callback method when an item already exists in input
hoverStyle React.CSSProperties Add custom input style on hover
focusStyle React.CSSProperties Add custom input style on focus
tagStyle React.CSSProperties Add custom tag item style
separator string input item separator, default is comma (,)
removeIcon React.ReactNode replace tag remove icon
containerProps HTMLAttribute update container div attribute

License

MIT ©

Readme

Keywords

none

Package Sidebar

Install

npm i @enipx/react-tags-input

Weekly Downloads

4

Version

1.0.3

License

MIT

Unpacked Size

65.6 kB

Total Files

29

Last publish

Collaborators

  • enipx