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

@avocode/avocode-email-tagsinput

v2.1.6

Published

React input component that handles creation and removal of tags based on matching email regex.

Downloads

120

Readme

avocode-email-tagsinput

React input component for rendering, creating and deleting tags that match emails. It is built upon better-react-tagsinput dependency which itself is based on SlateJS.

This library exposes AvocodeEmailTagsInput React component, it should be used as controlled component. Additionally it exposes utils object which is a collection of utilities that can be used alongside the input.

The input is opinionated and will not allow you to create tags that are not valid emails.

AvocodeEmailTagsInput API

This input receives the same props as components in @avocode/better-react-tagsinput library. Please refer to that documentation to see all the details.

In short you need to pass at least these props:

  • tags
  • query
  • onQueryChangeRequest
  • onTagAddRequest
  • onTagDeleteRequest

unique: boolean

Will only allow to display and add unique tags based on their value property. If you try to insert the email that was already added, it will not do anything by default.

collapsible: boolean

Will render so-called collapsible input. This means that it will add extra class names if you focus / blur the input. This allows you to style the input via CSS and add overflow property onto the input.

Additionally, it renders so-called Counter component which is displayed next to the input. The counter displays the amount of hidden tag nodes (the ones that are not visible).

renderCounter: ({ focused: boolean, tagCount: number }): $React$Node

Pass this factory if you want to override the provided Counter component and provide your own. The factory should return valid React component.

onTagCountUpdateRequest: (tagCount: number) => void

Callback that is triggered when the collapsible=true prop is passed, the input is blurred or focused or new tag nodes are received. It allows you to keep track of hidden tag nodes.

onSubmitRequest: (event: SyntheticKeyboardEvent<*>) => void`

This callback is triggered when ENTER key is pressed and query (text value) of the input is empty. Use this callback for form submissions.

submitKeyCodes: Array

This enables you to specify submission key code. By default, ENTER key code (13) is the only submission key allowed. You can pass valid key code(s) and they will be used instead to trigger onSubmitRequest callback.

Utils API

This object has utilities that are also included in @avocode/better-react-tagsinput so refer to documentation of that library for more info. These are:

  • parseValue
  • removeTagsByIndices

isValueValidEmail: (value: string): boolean

Pass a string and it will be compared to regular expression to see whether it's email. This utility is used internally by the input to allow only for valid emails.

getUniqueTagsByValue: (tags: Tags): Tags

Will remove duplicate tags based on value property. This util is used internally when unique prop is passed to the input.