npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-tag-autocomplete-fix

v6.3.0

Published

React Tag Autocomplete is a simple tagging component ready to drop in your React projects.

Downloads

1

Readme

React Tag Autocomplete

GitHub license build status Coverage Status npm version

React Tag Autocomplete is a simple tagging component ready to drop in your React projects. Originally based on the React Tags project by Prakhar Srivastav this version removes the drag-and-drop re-ordering functionality, adds appropriate roles and ARIA states and introduces a resizing text input. View demo.

Screenshot of React Tag Autocomplete

Please note: Version 7 of the component is under development, to view the upcoming version of React Tag Autocomplete please go to the beta repository.

This module is original forked from https://github.com/i-like-robots/react-tags

Installation

This is a Node.js module available through the npm registry. Before installing, download and install Node.js.

Installation is done using the npm install command:

npm install --save react-tag-autocomplete-fix

Usage

Here's a sample implementation that initializes the component with an empty list of tags and a pre-populated list of suggestions. For further customization details, see options.

import React, { useCallback, useRef, useState } from 'react'
import ReactTags from 'react-tag-autocomplete-fix'

function App () {
  const [tags, setTags] = useState([])

  const [suggestions, setSuggestions] = useState([
    { id: 1, name: "Apples" },
    { id: 2, name: "Pears" },
    { id: 3, name: "Bananas" },
    { id: 4, name: "Mangos" },
    { id: 5, name: "Lemons" },
    { id: 6, name: "Apricots" }
  ])

  const reactTags = useRef()

  const onDelete = useCallback((tagIndex) => {
    setTags(tags.filter((_, i) => i !== tagIndex))
  }, [tags])

  const onAddition = useCallback((newTag) => {
    setTags([...tags, newTag])
  }, [tags])

  return (
    <ReactTags
      ref={reactTags}
      tags={tags}
      suggestions={suggestions}
      onDelete={onDelete}
      onAddition={onAddition}
    />
  )
}

Options

id (optional)

The ID attribute given to the listbox element. Default: ReactTags.

tags (optional)

An array of selected tags. Each tag is an object which must have an id and a name property. Defaults to [].

const tags =  [
  { id: 1, name: 'Apples' },
  { id: 2, name: 'Pears' }
]

suggestions (optional)

An array of tag suggestions. Each suggestion is an object which must have an id and a name property and an optional disabled property to make the suggestion non-selectable. Defaults to [].

const suggestions = [
  { id: 3, name: 'Bananas' },
  { id: 4, name: 'Mangos' },
  { id: 5, name: 'Lemons' },
  { id: 6, name: 'Apricots', disabled: true }
]

suggestionsFilter (optional)

A callback function to filter suggestion items with. The callback receives two arguments; a suggestion and the current query and must return a boolean value.

If no function is supplied the default filter is applied. Defaults to null.

Note: This filter will be ignored if suggestionsTransform is supplied.

suggestionsTransform (optional)

A callback function to apply a custom filter to the suggestions. The callback receives two arguments; a query and the input suggestions and must return a new array of suggestion items. Using this option you can filter and sort suggestions.

Note: This will supersede suggestionsFilter in future.

import matchSorter from "match-sorter";

function suggestionsFilter(query, suggestions) {
  return matchSorter(suggestions, query, { keys: ["name"] });
}

placeholderText (optional)

The placeholder string shown for the input. Defaults to 'Add new tag'.

ariaLabelText (optional)

The aria-label string for the input. Defaults to placeholder string.

removeButtonText (optional)

The title text to add to the remove selected tag button. Default 'Click to remove tag'.

noSuggestionsText (optional)

Message shown if there are no matching suggestions. Defaults to null.

newTagText (optional)

Enables users to show a prompt to add a new tag at the bottom of the suggestions list if allowNew is enabled. Defaults to null.

autoresize (optional)

Boolean parameter to control whether the text-input should be automatically resized to fit its value. Defaults to true.

delimiters (optional)

Array of keys matching KeyboardEvent.key values. When a corresponding key is pressed it will trigger tag selection or creation. Defaults to ['Enter', 'Tab'].

minQueryLength (optional)

Minimum query length required to show the suggestions list. Defaults to 2.

maxSuggestionsLength (optional)

Maximum number of suggestions to display. Defaults to 6.

classNames (optional)

Override the default class names used by the component. Defaults to:

{
  root: 'react-tags',
  rootFocused: 'is-focused',
  selected: 'react-tags__selected',
  selectedTag: 'react-tags__selected-tag',
  selectedTagName: 'react-tags__selected-tag-name',
  search: 'react-tags__search',
  searchWrapper: 'react-tags__search-wrapper',
  searchInput: 'react-tags__search-input',
  suggestions: 'react-tags__suggestions',
  suggestionActive: 'is-active',
  suggestionDisabled: 'is-disabled',
  suggestionPrefix: 'react-tags__suggestion-prefix'
}

onAddition (required)

Function called when the user wants to add a tag. Receives the tag.

const [tags, setTags] = useState([])

function onAddition (newTag) {
  setTags([...tags, newTag])
}

onDelete (required)

Function called when the user wants to delete a tag. Receives the tag index.

const [tags, setTags] = useState([])

function onDelete (tagIndex) {
  setTags(tags.filter((_, i) => i !== tagIndex))
}

onInput (optional)

Optional event handler when the input value changes. Receives the current query.

const [isBusy, setIsBusy] = useState(false)

function onInput (query) {
  if (!isBusy) {
    setIsBusy(true)

    return fetch(`?query=${query}`).then((result) => {
      setIsBusy(false)
    })
  }
}

onFocus (optional)

Optional callback function for when the input receives focus. Receives no arguments.

onBlur (optional)

Optional callback function for when focus on the input is lost. Receives no arguments.

onValidate (optional)

Optional validation function that determines if tag should be added. Receives the tag object and must return a boolean.

function onValidate (tag) {
  return tag.name.length >= 5;
}

addOnBlur (optional)

Creates a tag from the current input value when focus on the input is lost. Defaults to false.

allowNew (optional)

Enable users to add new (not suggested) tags. Defaults to false.

allowBackspace (optional)

Enable users to delete selected tags when backspace is pressed while focussed on the text input when empty. Defaults to true.

tagComponent (optional)

Provide a custom tag component to render. Receives the tag, button text, and delete callback as props. Defaults to null.

function TagComponent ({ tag, removeButtonText, onDelete }) {
  return (
    <button type='button' title={`${removeButtonText}: ${tag.name}`} onClick={onDelete}>
      {tag.name}
    </button>
  )
}

suggestionComponent (optional)

Provide a custom suggestion component to render. Receives the suggestion and current query as props. Defaults to null.

function SuggestionComponent ({ item, query }) {
  return (
    <span id={item.id} className={item.name === query ? 'match' : 'no-match'}>
      {item.name}
    </span>
  )
}

inputAttributes (optional)

An object containing additional attributes that will be applied to the text input. Please note that this prop cannot overwrite existing attributes, it can only add new ones. Defaults to {}.

API

By adding a ref to any instances of this component you can access its API methods.

addTag(tag)

Adds a tag to the list of selected tags. This will trigger the validation and addition callbacks.

deleteTag(index)

Removes a tag from the list of selected tags. This will trigger the delete callback.

clearInput()

Clears the input, current query and selected suggestion.

clearSelectedIndex()

Clears the currently selected suggestion.

focusInput()

Sets cursor focus to the text input element.

Styling

It is possible to customize the appearance of the component, the included styles found in /example/styles.css are only an example.

Development

The component is written in ES6 and uses Rollup as its build tool. Tests are written with Jasmine using JSDOM.

npm install
npm run dev # will open http://localhost:8080 and watch files for changes

Upgrading

To see all changes refer to the changelog.

Upgrading from 5.x to 6.x

  • React 16.5 or above is now required.
  • Event handlers and callbacks have been renamed to use on prefixes, e.g. the handleAddition() callback should now be called onAddition().
  • The delimiters option is now an array of KeyboardEvent.key values and not KeyboardEvent.keyCode codes, e.g. [13, 9] should now be written as ['Enter', 'Tab']. See https://keycode.info/ for more information.
  • The placeholder option has been renamed placeholderText
  • The ariaLabel option has been renamed ariaLabelText
  • The delimiterChars option has been removed, use the delimiters option instead.
  • The clearInputOnDelete option has been removed and is now the default behaviour
  • The autofocus option has been removed.