Rich input for adding tags built on Slate JS. Keyboard and mouse control enabled. Enables copy and pasting, unique email value validation. Includes collapsible input with number indicator.
-
Install the library
npm install @avocode/styled-avocode-email-tagsinput
-
Provide peer dependencies
npm install react && npm install react-dom && npm install immutable
-
Add default styles or refer to demo page to see source code on how to style the components.
import StyledAvocodeEmailTagsInput from '@avocode/styled-avocode-email-tagsinput' import '@avocode/styled-avocode-email-tagsinput/dist/main.css' // [...] render() { return ( <StyledAvocodeEmailTagsInput /> ) }
If you do not wish to use default styles, use package @avocode/avocode-email-tagsinput
to import AvocodeEmailTagsInput
component and create your own stylesheet.
This monorepo contains four packages (actually five, see below):
-
@avocode/styled-avocode-email-tagsinput
Recommended way to use this library, it exposes
StyledAvocodeEmailTagsInput
component that converts emails into tags. This package contains opinionated CSS styles. README -
@avocode/avocode-email-tagsinput
React input component for typing emails that are converted into tags. It uses base component from
better-react-tagsinput
library. It exposes componentAvocodeEmailTagsInput
. README -
@avocode/better-react-tagsinput
React input component / editor created with SlateJS library. Its intended usage is to render, create and remove tags inside input. The input can also be collapsible (have overflow via CSS). It is controlled component which must receive
tags
andquery
props, along with callbacks for events that change the input state. README -
playground
React app to be used during development of all the packages. README
The fifth package is avocode/avocode-email-tagsinput-config
which is only for development purposes. It sets up configuration for Webpack and Babel.
Library uses npm
package manager to manage the dependencies. All the scripts mentioned here need to be prefixed with npm run [script]
unless stated otherwise. Run all the scripts from the root directory.
The babel
configuration is shared across the packages so first you need to run npm install
. The monorepo is managed by Lerna so after the install is complete, the dependencies will be resolved to root node_modules
directory. Versioning is set up so each package has the same version all the time.
Webpack config is also shared for the most part and will output the result to dist/
directories in each package.
start
Starts builds in watch mode in the all packages and runs dev server forplayground
. The changes in any package will be updated live. Use this command to develop the libraries and preview changes.
Each package can be built using build
script in each package directory. You can build specific package from the root directory by running npm run build:package
and pass package name as argument. The distribution files will be located within dist/
folder for each package.
-
build
Builds all packages. -
build:package
Builds specific package that is passed as argument.
Each package has its own prepublish
script that will trigger builds. Packages are published to npm registry to private @avocode
workspace so you need to run npm login
first (this is important). The exception is playground
package that has different publish target.
Before publishing make sure you increment version in each package since it's published by git tags.
-
publish
Builds and publishes all packages. -
publish:package
Publishes specific package that is passed as argument. -
version
Pass version as argument to change all packages to that specific version. Info is read fromlerna.json
file.
-
clean:all
Clearsdist/
andnode_modules/
folders in each package, removes rootnode_modules/
directory as well -
clean
Clears onlydist/
folders in each package. -
clean:package
Clears onlydist/
folder in specific package that is passed as argument.
The project uses Flow type library. The libraries are set up to expose type definitions to their environment. External type definitions are prepared during build.
-
flow
Typechecks all packages. -
eslint
Runs linter.
test
Runs unit and E2E tests for all packages.