# @mindstar/material-tag-suggest > Material Tag Suggest is a simple utility that allows the user to select a variety of tags using autocomplete Latest version **0.1.0** (published 2019-08-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @mindstar/material-tag-suggest pnpm add @mindstar/material-tag-suggest yarn add @mindstar/material-tag-suggest bun add @mindstar/material-tag-suggest ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0 | | Published | 2019-08-06 | | First published | 2019-08-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 8 | | Unpacked size | 20.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Brian Campo | | Maintainers | brian.campo, brianmindstar | | Keywords | react, material-ui, input, select, autocomplete, suggest | ## Links - npm: https://www.npmjs.com/package/@mindstar/material-tag-suggest - npm.io page: https://npm.io/package/@mindstar/material-tag-suggest ## Dependencies (8) - [react](https://npm.io/package/react.md) ^16.8.6 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [downshift](https://npm.io/package/downshift.md) ^3.2.10 - [react-dom](https://npm.io/package/react-dom.md) ^16.8.6 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.2.1 - [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.2.1 - [@material-ui/styles](https://npm.io/package/@material-ui/styles.md) ^4.2.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.0 (latest) — 2019-08-06 - 0.1.2 (beta) — 2019-08-07 - 0.1.1 — 2019-08-07 ## README # 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](https://github.com/i-like-robots/react-tags) project by [I like robots](https://github.com/i-like-robots) and Kent C Dodds excellent [Star Wars Mailer](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F04-multi-select.js&moduleview=1) ## 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. ```javascript npm i material-tag-suggest yarn add material-tag-suggest ``` ## Usage Include a sample component instantiation here ```javascipt ``` 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 - [`id`](#id-optional) - [`label`](#label) - [`placeholder`](#placeholder-optional) - [`minSuggestLength`](#minsuggestlength-optional) - [`delimiters`](#delimiters-optional) - []() ## Functions - [`onAddTag`](#onaddtag-optional) - [`onDeleteTag`](#ondeletetag-optional) - [`onCreateTag`](#oncreatetag-optional) - []() ## 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._** ### **propClassNames** classes - [`materialTags`](#materialtags) - [`materialTagsFocused`](#materialtagsfocused) #### materialTags Styling for the wrapper component. #### materialTagsFocused Styles the wrapper when focused --- _Source: https://npm.io/package/@mindstar/material-tag-suggest · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._