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
Values
Functions
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}
propClassNames
)
Styling (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.
propClassNames classes
materialTags
Styling for the wrapper component.
materialTagsFocused
Styles the wrapper when focused