@mindstar/material-tag-suggest NPM

Material Tag Suggest

Material Tag Suggest is a simple utility that allows users to select and add tags in a React project using Material-UI. The goal is to leverage native Material-UI components and provide as much extensibility as possible.

This project combines concepts from React Tag Autocomplete project by I like robots and Kent C Dodds excellent Star Wars Mailer

Dependencies

This project is intended to be used within a React application that utilizes Material-UI. Before importing this component into your project make sure you have initalized a Reach App and bootstrapped a Material-UI provider.

Installation

Material Tag Suggest is avaialble via npm.

npm i material-tag-suggest

yarn add material-tag-suggest

Usage

Include a sample component instantiation here

You can also take a look at the /example folder for a more complete implementation with minimal props provided to the component.

Options/Props

The following options and props can be provided to the component

Functions

onAddTag
onDeleteTag
onCreateTag

Values

id (optional)

The ID of the component Default value: 'material-tags'

label

The label to use for the Input Default value: ''

placeholder (optional)

The placeholder to use for the Input Default value: ''

minSuggestLength (optional)

The minimum length input that will trigger an autosuggestion Default value: 3

delimiters (optional)

An array containing string values for any key to use as a delimiter to create a new tag
Default value: []

Functions

onAddTag (optional)

Function that is called when a tag is selected and added to the collection Returns {addedTag, selectedTags}

onDelete (optional)

Function to be called when a tag is deleted from the collection of tags Returns {deletedTag, selectedTags}

onCreateTag (optional)

Function to be called when a new tag is created and added to the collection of tags Returns {createdTag, selectedTags}

Styling (`propClassNames`)

Material Tags Suggest provides base Styling but can also be custom styled. The core styling is based on Material UI's component styling and uses makeStyles and CSS in JS. To provide different styles pass in a propClassNames prop.

propClassNames must contain all styles including any base styles you intend to use.