@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.