Need Public Method

    react-tagged
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-tagged

    A minimalistic React tags component

    Tests

    Tagged in action

    Features

    💾 1.2KB GZipped

    🔋 TypeScript declarations included

    Keyboard shortcuts (using arrows to pick suggestions, etc.)

    😍 Fully-customizable look (including animations) via CSS

    Installation

    npm install --save react-tagged
    
    # or
    yarn add react-tagged

    Usage

    import { Tagged } from 'react-tagged'
    import 'react-tagged/dist/index.css' // styles
    
    <Tagged
      initialTags={[]}                          // initial tags (array of strings)
      suggestions={[]}                          // suggestions (array of strings)
      onChange={(tags) => {}}                   // called every a tag is added or removed, tags is an array of strings
      suggestionWrapPattern="<b><u>$1</u></b>"  // how to highlight search pattern in suggestions
      allowCustom={true}                        // when false, it will only allow tags from suggestions
      inputPlaceholder="Add new tag"            // the input placeholder
      suggestionsThreshold={1}                  // how many characters typed before suggestions appear
      autoFocus={false}                         // put focus into the input field
      reverse={false}                           // what should go first: tags or the input
    />

    F.A.Q.

    How to customize how it looks?

    Simply override the CSS classes. Changing the tag background, for instance, is as easy as

    .react-tagged--tag {
      background-color: orange;
    }

    How to override the default animations?

    The default transition is applied to the max-width of a tag. There are four CSS classes that handle CSS transitions on tag appear and on tag leave. Override those to change it.

    .react-tagged--tag-enter {
      transition: max-width 0.2s ease-out;
      max-width: 0;
    }
    
    .react-tagged--tag-enter.react-tagged--tag-enter-active {
      max-width: 100px;
    }
    
    .react-tagged--tag-leave {
      transition: max-width 0.2s ease-in;
      max-width: 100px;
    }
    
    .react-tagged--tag-leave.react-tagged--tag-leave-active {
      max-width: 0;
    }

    Keywords

    Install

    npm i react-tagged

    DownloadsWeekly Downloads

    16

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    120 kB

    Total Files

    25

    Last publish

    Collaborators

    • yanis