{"id":25407873,"url":"https://github.com/gaetanozappi/react-textinput-chip","last_synced_at":"2025-10-31T03:30:35.596Z","repository":{"id":57346320,"uuid":"213872621","full_name":"gaetanozappi/react-textinput-chip","owner":"gaetanozappi","description":"React library to generate textinput chip.","archived":false,"fork":false,"pushed_at":"2020-07-18T11:51:12.000Z","size":509,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-09T06:36:44.492Z","etag":null,"topics":["chip","chips","chips-input","material","material-ui","react","textinput"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaetanozappi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-09T09:11:45.000Z","updated_at":"2021-03-05T22:23:50.000Z","dependencies_parsed_at":"2022-09-18T11:02:18.878Z","dependency_job_id":null,"html_url":"https://github.com/gaetanozappi/react-textinput-chip","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-textinput-chip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-textinput-chip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-textinput-chip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-textinput-chip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaetanozappi","download_url":"https://codeload.github.com/gaetanozappi/react-textinput-chip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239098746,"owners_count":19581297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chip","chips","chips-input","material","material-ui","react","textinput"],"created_at":"2025-02-16T07:19:07.623Z","updated_at":"2025-10-31T03:30:30.277Z","avatar_url":"https://github.com/gaetanozappi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Js: react-textinput-chip\n\n[![GitHub package version](https://img.shields.io/github/package-json/v/gaetanozappi/react-textinput-chip.svg?style=flat\u0026colorB=2b7cff)](https://github.com/gaetanozappi/react-textinput-chip)\n[![github home](http://img.shields.io/npm/v/react-textinput-chip.svg?style=flat)](https://www.npmjs.com/package/react-textinput-chip)\n[![github home](https://img.shields.io/badge/gaetanozappi-react--textinput--chip-blue.svg?style=flat)](https://github.com/gaetanozappi/react-textinput-chip)\n[![npm](https://img.shields.io/npm/dm/react-textinput-chip.svg?style=flat\u0026colorB=007ec6)](https://www.npmjs.com/package/react-textinput-chip)\n\n[![github issues](https://img.shields.io/github/issues/gaetanozappi/react-textinput-chip.svg?style=flat)](https://github.com/gaetanozappi/react-textinput-chip/issues)\n[![github closed issues](https://img.shields.io/github/issues-closed/gaetanozappi/react-textinput-chip.svg?style=flat\u0026colorB=44cc11)](https://github.com/gaetanozappi/react-textinput-chip/issues?q=is%3Aissue+is%3Aclosed)\n[![Issue Stats](https://img.shields.io/issuestats/i/github/gaetanozappi/react-textinput-chip.svg?style=flat\u0026colorB=44cc11)](http://github.com/gaetanozappi/react-textinput-chip/issues)\n[![github license](https://img.shields.io/github/license/gaetanozappi/react-textinput-chip.svg)]()\n\n\u003cimg src=\"https://github.com/gaetanozappi/react-textinput-chip/raw/master/screenshot/react-textinput-chip.gif\" /\u003e\n\nDemo: [Codesandbox](https://codesandbox.io/s/material-demo-n1it6 \"Codesandbox\")\n\n- [Usage](#-usage)\n- [License](#-license)\n\n## 📖 Getting started\n\n`$ npm install react-textinput-chip --save`\n\n## 💻 Usage\n\n```javascript\nimport React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport deburr from \"lodash/deburr\";\nimport ReactJson from \"react-json-view\";\nimport TextInputChip from \"react-textinput-chip\";\nimport MenuItem from \"./components/MenuItem\";\nimport {\n Avatar,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n TextField\n} from \"@material-ui/core\";\nimport { withStyles } from \"@material-ui/styles\";\nimport FaceIcon from \"@material-ui/icons/Face\";\nimport DoneIcon from \"@material-ui/icons/Done\";\n\nconst styles = theme =\u003e ({\n root: {\n \"\u0026 label.Mui-focused\": {\n color: \"#007bff\"\n },\n \"\u0026 .MuiInput-underline:before\": {\n borderBottomColor: \"#cacccf\"\n },\n \"\u0026 .MuiInput-underline:after\": {\n borderBottomColor: \"#007bff\"\n },\n \"\u0026 .MuiInput-underline:hover:not(.Mui-disabled):before\": {\n borderBottomColor: \"#ffb41b\"\n }\n }\n});\n\nlet MyTextField = withStyles(styles)(TextField);\n\nconst suggestions = [\n {\n name: \"Regina\",\n surname: \"Hampton\",\n email: \"regina.hampton@email.com\",\n address: \"506 Macon Street, Waterford, Washington, 706\"\n },\n {\n name: \"Mosley\",\n surname: \"Navarro\",\n email: \"mosley.navarro@email.com\",\n address: \"172 Wythe Place, Smock, Tennessee, 9071\"\n },\n {\n name: \"Lillie\",\n surname: \"Steele\",\n email: \"lillie.steele@email.com\",\n address: \"727 Brightwater Avenue, Welda, North Dakota, 453\"\n },\n {\n name: \"Liz\",\n surname: \"Cleveland\",\n email: \"liz.cleveland@email.com\",\n address: \"447 Lewis Place, Kerby, Alabama, 6018\"\n },\n {\n name: \"Rogers\",\n surname: \"Boyd\",\n email: \"rogers.boyd@email.com\",\n address: \"912 Hooper Street, Masthope, Maine, 4501\"\n },\n {\n name: \"Bullock\",\n surname: \"Glenn\",\n email: \"bullock.glenn@email.com\",\n address: \"921 Seton Place, Downsville, Idaho, 8474\"\n },\n {\n name: \"Everett\",\n surname: \"Bradshaw\",\n email: \"everett.bradshaw@email.com\",\n address: \"994 Montague Street, Driftwood, Puerto Rico, 6436\"\n },\n {\n name: \"Mccormick\",\n surname: \"Walls\",\n email: \"mccormick.walls@email.com\",\n address: \"809 Decatur Street, Bawcomville, Indiana, 8329\"\n },\n {\n name: \"Weiss\",\n surname: \"Garcia\",\n email: \"weiss.garcia@email.com\",\n address: \"347 Hinckley Place, Greer, Iowa, 4916\"\n },\n {\n name: \"Sonja\",\n surname: \"Valdez\",\n email: \"sonja.valdez@email.com\",\n address: \"266 Elm Place, Hanover, Mississippi, 4444\"\n },\n {\n name: \"Little\",\n surname: \"Cote\",\n email: \"little.cote@email.com\",\n address: \"383 Lott Avenue, Cartwright, Utah, 9826\"\n },\n {\n name: \"Juliet\",\n surname: \"Dunlap\",\n email: \"juliet.dunlap@email.com\",\n address: \"126 Hastings Street, Lydia, Connecticut, 8128\"\n },\n {\n name: \"Sheena\",\n surname: \"Brady\",\n email: \"sheena.brady@email.com\",\n address: \"414 Pulaski Street, Choctaw, Georgia, 2412\"\n },\n {\n name: \"Bobbi\",\n surname: \"Alexander\",\n email: \"bobbi.alexander@email.com\",\n address: \"956 Ide Court, Madaket, Wisconsin, 2251\"\n },\n {\n name: \"Schneider\",\n surname: \"Mosley\",\n email: \"schneider.mosley@email.com\",\n address: \"425 Love Lane, Mansfield, Oregon, 519\"\n },\n {\n name: \"Griffin\",\n surname: \"Camacho\",\n email: \"griffin.camacho@email.com\",\n address: \"655 Provost Street, Venice, Arkansas, 7752\"\n },\n {\n name: \"Chavez\",\n surname: \"Bauer\",\n email: \"chavez.bauer@email.com\",\n address: \"701 Williamsburg Street, Brule, Virginia, 2962\"\n },\n {\n name: \"Kent\",\n surname: \"Nicholson\",\n email: \"kent.nicholson@email.com\",\n address: \"556 Bushwick Avenue, Klondike, South Carolina, 9899\"\n },\n {\n name: \"Lauren\",\n surname: \"Stephenson\",\n email: \"lauren.stephenson@email.com\",\n address: \"452 Kermit Place, Columbus, South Dakota, 5995\"\n },\n {\n name: \"Debra\",\n surname: \"Meadows\",\n email: \"debra.meadows@email.com\",\n address: \"542 Powell Street, Nadine, New Jersey, 6918\"\n },\n {\n name: \"Robinson\",\n surname: \"Shelton\",\n email: \"robinson.shelton@email.com\",\n address: \"181 Central Avenue, Edgar, American Samoa, 4913\"\n },\n {\n name: \"Roth\",\n surname: \"Boone\",\n email: \"roth.boone@email.com\",\n address: \"895 Granite Street, Hickory, Wyoming, 9024\"\n },\n {\n name: \"Mattie\",\n surname: \"Lynch\",\n email: \"mattie.lynch@email.com\",\n address: \"998 Grove Place, Watchtower, Massachusetts, 2874\"\n },\n {\n name: \"Frances\",\n surname: \"Ellison\",\n email: \"frances.ellison@email.com\",\n address: \"315 Banner Avenue, Makena, Alaska, 7395\"\n },\n {\n name: \"Catherine\",\n surname: \"Dickerson\",\n email: \"catherine.dickerson@email.com\",\n address: \"605 Oceanview Avenue, Gardners, West Virginia, 6136\"\n },\n {\n name: \"Whitfield\",\n surname: \"Donaldson\",\n email: \"whitfield.donaldson@email.com\",\n address: \"326 Interborough Parkway, Dunbar, Maryland, 401\"\n },\n {\n name: \"Hayes\",\n surname: \"Herman\",\n email: \"hayes.herman@email.com\",\n address: \"161 Keen Court, Westboro, Delaware, 4142\"\n },\n {\n name: \"Rodriquez\",\n surname: \"Craft\",\n email: \"rodriquez.craft@email.com\",\n address: \"924 Calder Place, Comptche, Illinois, 4976\"\n },\n {\n name: \"Russell\",\n surname: \"Oneal\",\n email: \"russell.oneal@email.com\",\n address: \"217 Kingston Avenue, Thomasville, Virgin Islands, 1829\"\n },\n {\n name: \"Ramos\",\n surname: \"Skinner\",\n email: \"ramos.skinner@email.com\",\n address: \"285 Baughman Place, Baker, Missouri, 6189\"\n },\n {\n name: \"Eaton\",\n surname: \"Salinas\",\n email: \"eaton.salinas@email.com\",\n address: \"489 Union Street, Vernon, Marshall Islands, 2136\"\n },\n {\n name: \"Parsons\",\n surname: \"Wade\",\n email: \"parsons.wade@email.com\",\n address: \"967 Dodworth Street, Harborton, Montana, 696\"\n },\n {\n name: \"Mendoza\",\n surname: \"Chandler\",\n email: \"mendoza.chandler@email.com\",\n address: \"344 Hudson Avenue, Thatcher, Kentucky, 2071\"\n },\n {\n name: \"Valentine\",\n surname: \"French\",\n email: \"valentine.french@email.com\",\n address: \"216 Berry Street, Beaverdale, Colorado, 1766\"\n },\n {\n name: \"Eva\",\n surname: \"Reeves\",\n email: \"eva.reeves@email.com\",\n address: \"960 Landis Court, Caron, Rhode Island, 3102\"\n },\n {\n name: \"Cunningham\",\n surname: \"Sweet\",\n email: \"cunningham.sweet@email.com\",\n address: \"784 Woodhull Street, Soudan, Palau, 4977\"\n },\n {\n name: \"Lindsey\",\n surname: \"Savage\",\n email: \"lindsey.savage@email.com\",\n address:\n \"381 Kenilworth Place, Sisquoc, Federated States Of Micronesia, 238\"\n },\n {\n name: \"Virginia\",\n surname: \"Molina\",\n email: \"virginia.molina@email.com\",\n address: \"397 Wolcott Street, Townsend, Vermont, 1052\"\n },\n {\n name: \"Watkins\",\n surname: \"Hull\",\n email: \"watkins.hull@email.com\",\n address: \"440 Friel Place, Toftrees, Oklahoma, 5860\"\n },\n {\n name: \"Teresa\",\n surname: \"Knapp\",\n email: \"teresa.knapp@email.com\",\n address: \"394 Colby Court, Coral, North Carolina, 4182\"\n },\n {\n name: \"Barron\",\n surname: \"Callahan\",\n email: \"barron.callahan@email.com\",\n address: \"125 Ashland Place, Waiohinu, Ohio, 7142\"\n },\n {\n name: \"Bradshaw\",\n surname: \"Roy\",\n email: \"bradshaw.roy@email.com\",\n address: \"194 Veterans Avenue, Alden, Kansas, 3236\"\n },\n {\n name: \"Vargas\",\n surname: \"Keller\",\n email: \"vargas.keller@email.com\",\n address: \"102 Times Placez, Tooleville, Nevada, 7208\"\n },\n {\n name: \"Levine\",\n surname: \"Fitzgerald\",\n email: \"levine.fitzgerald@email.com\",\n address: \"486 Tapscott Avenue, Kirk, Pennsylvania, 8353\"\n },\n {\n name: \"Connie\",\n surname: \"Park\",\n email: \"connie.park@email.com\",\n address: \"953 Caton Place, Baden, Hawaii, 6875\"\n },\n {\n name: \"Webster\",\n surname: \"Mooney\",\n email: \"webster.mooney@email.com\",\n address: \"372 Bragg Court, Marne, Minnesota, 1062\"\n },\n {\n name: \"Allie\",\n surname: \"Dodson\",\n email: \"allie.dodson@email.com\",\n address: \"118 Harman Street, Edneyville, Arizona, 6451\"\n },\n {\n name: \"Kline\",\n surname: \"Alford\",\n email: \"kline.alford@email.com\",\n address: \"148 Lorraine Street, Libertytown, Florida, 5568\"\n },\n {\n name: \"Trujillo\",\n surname: \"Ellis\",\n email: \"trujillo.ellis@email.com\",\n address: \"598 Village Court, Rodanthe, Nebraska, 8622\"\n },\n {\n name: \"Frye\",\n surname: \"Wise\",\n email: \"frye.wise@email.com\",\n address: \"127 Pierrepont Place, Dupuyer, Northern Mariana Islands, 6382\"\n },\n {\n name: \"Ashley\",\n surname: \"Medina\",\n email: \"ashley.medina@email.com\",\n address: \"156 Beaver Street, Woodlands, Guam, 9604\"\n },\n {\n name: \"Stokes\",\n surname: \"Nelson\",\n email: \"stokes.nelson@email.com\",\n address: \"502 Bevy Court, Jackpot, Louisiana, 8235\"\n },\n {\n name: \"Alford\",\n surname: \"Weaver\",\n email: \"alford.weaver@email.com\",\n address: \"901 Cornelia Street, Spokane, District Of Columbia, 7646\"\n },\n {\n name: \"Mcleod\",\n surname: \"Hunt\",\n email: \"mcleod.hunt@email.com\",\n address: \"482 Ludlam Place, Vowinckel, Michigan, 4598\"\n },\n {\n name: \"Sybil\",\n surname: \"Winters\",\n email: \"sybil.winters@email.com\",\n address: \"962 Kiely Place, Chamberino, California, 5225\"\n },\n {\n name: \"Chandler\",\n surname: \"Pacheco\",\n email: \"chandler.pacheco@email.com\",\n address: \"488 Harden Street, Canby, New York, 7722\"\n },\n {\n name: \"Fisher\",\n surname: \"Porter\",\n email: \"fisher.porter@email.com\",\n address: \"525 Hendrix Street, Wiscon, New Mexico, 8549\"\n },\n {\n name: \"Lucas\",\n surname: \"Davis\",\n email: \"lucas.davis@email.com\",\n address: \"527 Garden Street, Otranto, Texas, 4584\"\n },\n {\n name: \"Petty\",\n surname: \"Pate\",\n email: \"petty.pate@email.com\",\n address: \"738 Gunnison Court, Itmann, Washington, 9121\"\n },\n {\n name: \"Peters\",\n surname: \"Gaines\",\n email: \"peters.gaines@email.com\",\n address: \"235 Girard Street, Caroleen, Tennessee, 8832\"\n },\n {\n name: \"Jan\",\n surname: \"Flowers\",\n email: \"jan.flowers@email.com\",\n address: \"702 Beverly Road, Caroline, North Dakota, 1450\"\n },\n {\n name: \"Deborah\",\n surname: \"Jacobson\",\n email: \"deborah.jacobson@email.com\",\n address: \"515 Tennis Court, Lorraine, Alabama, 9509\"\n },\n {\n name: \"Bass\",\n surname: \"Blevins\",\n email: \"bass.blevins@email.com\",\n address: \"866 Trucklemans Lane, Rossmore, Maine, 6478\"\n },\n {\n name: \"Maritza\",\n surname: \"Stein\",\n email: \"maritza.stein@email.com\",\n address: \"596 Albee Square, Genoa, Idaho, 412\"\n },\n {\n name: \"Isabel\",\n surname: \"Mcfarland\",\n email: \"isabel.mcfarland@email.com\",\n address: \"633 Stryker Court, Alamo, Puerto Rico, 2328\"\n },\n {\n name: \"Vance\",\n surname: \"Bush\",\n email: \"vance.bush@email.com\",\n address: \"543 Horace Court, Zeba, Indiana, 528\"\n },\n {\n name: \"Fitzgerald\",\n surname: \"Byrd\",\n email: \"fitzgerald.byrd@email.com\",\n address: \"556 Hegeman Avenue, Glasgow, Iowa, 545\"\n },\n {\n name: \"Lessie\",\n surname: \"Delacruz\",\n email: \"lessie.delacruz@email.com\",\n address: \"427 Paerdegat Avenue, Sanford, Mississippi, 7206\"\n },\n {\n name: \"Pamela\",\n surname: \"Gallagher\",\n email: \"pamela.gallagher@email.com\",\n address: \"620 Louis Place, Winston, Utah, 3358\"\n },\n {\n name: \"Nora\",\n surname: \"Berger\",\n email: \"nora.berger@email.com\",\n address: \"940 Greenwood Avenue, Coultervillle, Connecticut, 2787\"\n },\n {\n name: \"Silvia\",\n surname: \"Monroe\",\n email: \"silvia.monroe@email.com\",\n address: \"980 Vanderveer Place, Berwind, Georgia, 348\"\n },\n {\n name: \"Amalia\",\n surname: \"Roberson\",\n email: \"amalia.roberson@email.com\",\n address: \"444 Bay Street, Woodlake, Wisconsin, 770\"\n },\n {\n name: \"Gardner\",\n surname: \"Fulton\",\n email: \"gardner.fulton@email.com\",\n address: \"877 Reed Street, Swartzville, Oregon, 1852\"\n },\n {\n name: \"James\",\n surname: \"Beasley\",\n email: \"james.beasley@email.com\",\n address: \"442 Java Street, Dahlen, Arkansas, 5561\"\n },\n {\n name: \"Gordon\",\n surname: \"Crawford\",\n email: \"gordon.crawford@email.com\",\n address: \"236 Irving Avenue, Shindler, Virginia, 7767\"\n },\n {\n name: \"Walters\",\n surname: \"Rodriguez\",\n email: \"walters.rodriguez@email.com\",\n address: \"847 Clara Street, Joppa, South Carolina, 2859\"\n },\n {\n name: \"Willie\",\n surname: \"Guerra\",\n email: \"willie.guerra@email.com\",\n address: \"149 Richardson Street, Glidden, South Dakota, 7043\"\n },\n {\n name: \"Marla\",\n surname: \"Carrillo\",\n email: \"marla.carrillo@email.com\",\n address: \"918 Boulevard Court, Norfolk, New Jersey, 3312\"\n },\n {\n name: \"Marsha\",\n surname: \"Greer\",\n email: \"marsha.greer@email.com\",\n address: \"708 Kensington Street, Knowlton, American Samoa, 3326\"\n },\n {\n name: \"Leann\",\n surname: \"Rowland\",\n email: \"leann.rowland@email.com\",\n address: \"675 Agate Court, Odessa, Wyoming, 4910\"\n },\n {\n name: \"Moody\",\n surname: \"Atkins\",\n email: \"moody.atkins@email.com\",\n address: \"630 Moore Place, Hartsville/Hartley, Massachusetts, 1099\"\n },\n {\n name: \"Lola\",\n surname: \"Alston\",\n email: \"lola.alston@email.com\",\n address: \"996 Jackson Street, Snyderville, Alaska, 4664\"\n },\n {\n name: \"Ingrid\",\n surname: \"Velasquez\",\n email: \"ingrid.velasquez@email.com\",\n address: \"650 Linden Street, Edmund, West Virginia, 5926\"\n },\n {\n name: \"Bailey\",\n surname: \"Maynard\",\n email: \"bailey.maynard@email.com\",\n address: \"955 Bridgewater Street, Ribera, Maryland, 1362\"\n },\n {\n name: \"Torres\",\n surname: \"Duffy\",\n email: \"torres.duffy@email.com\",\n address: \"165 National Drive, Russellville, Delaware, 708\"\n }\n].map((suggestion, i) =\u003e ({\n label: suggestion.email,\n name: suggestion.name,\n surname: suggestion.surname,\n address: suggestion.address,\n email: suggestion.email,\n picture: \"https://picsum.photos/id/\" + i + \"/200/200\"\n}));\n\nexport default class Home extends Component {\n constructor() {\n super();\n this.state = {\n sugg: suggestions,\n options: [],\n userSelect: suggestions[2],\n open: false,\n name: \"\",\n surname: \"\",\n address: \"\"\n };\n }\n\n onSearch = q =\u003e {\n const { sugg } = this.state;\n console.log(\"onSearchHome\", q);\n const inputValue = deburr(q.trim()).toLowerCase();\n const inputLength = inputValue.length;\n let count = 0;\n\n let options =\n inputLength === 0\n ? []\n : sugg.filter(suggestion =\u003e {\n const keep =\n count \u003c 5 \u0026\u0026\n suggestion.label \u0026\u0026\n suggestion.label.slice(0, inputLength).toLowerCase() ===\n inputValue;\n if (keep) count += 1;\n return keep;\n });\n this.setState({ options });\n };\n\n getLabel(...props) {\n return props\n .reduce((acc, val) =\u003e {\n return acc + \"\" + val.charAt(0);\n }, \"\")\n .toUpperCase();\n }\n\n onChange = userSelect =\u003e {\n this.setState({ userSelect });\n };\n\n handleDialog = open =\u003e {\n this.setState({ open });\n };\n\n onChangeField = field =\u003e ({ target: { value } }) =\u003e {\n let state = {};\n state[field] = value;\n this.setState(state);\n };\n\n addUser = () =\u003e {\n const { name, surname, address, sugg } = this.state;\n let obj = {\n value: name,\n label: (name + \".\" + surname + \"@email.com\").toLowerCase(),\n name,\n surname,\n email: (name + \".\" + surname + \"@email.com\").toLowerCase(),\n address,\n picture: \"https://picsum.photos/id/\" + sugg.length + \"/200/200\"\n };\n this.setState(\n previousState =\u003e ({\n name: \"\",\n surname: \"\",\n address: \"\",\n sugg: [...previousState.sugg, obj]\n }),\n () =\u003e {\n this.handleDialog(false);\n }\n );\n };\n\n render() {\n const { userSelect, options, open } = this.state;\n\n return (\n \u003c\u003e\n {userSelect \u0026\u0026 \u003cReactJson src={userSelect} theme=\"solarized\" /\u003e}\n \u003cbr /\u003e\n \u003cbr /\u003e\n \u003cTextInputChip\n fullWidth\n options={options}\n onSearch={this.onSearch}\n onChange={userSelect =\u003e this.onChange(userSelect)}\n //selectedItem={userSelect}\n //renderMenuItemChildren={option =\u003e `${option.name} ${option.surname} (${option.email})` }\n renderMenuItemChildren={option =\u003e \u003cMenuItem option={option} /\u003e}\n //labelKey=\"address\"\n labelKey={option =\u003e\n `${option.name} ${option.surname} (${option.address})`\n }\n placeholder={\"Cerca\"}\n label={\"User\"}\n noResult={a =\u003e this.handleDialog(a)}\n noFound={\"No found result. Add user.\"}\n backgroundColorChip={\"#007bcc\"}\n colorTextChip={\"#fff\"}\n colorDelete={\"#d4d7d6\"}\n loading\n backgroundColorLoading={\"#f59c42\"}\n avatar={option =\u003e \u003cAvatar alt={option.label} src={option.picture} /\u003e}\n /*avatar={option =\u003e (\n \u003cAvatar\u003e{this.getLabel(option.name, option.surname)}\u003c/Avatar\u003e\n )}*/\n //avatar={() =\u003e \u003cFaceIcon style={{ color: \"#fff\" }} /\u003e}\n //deleteIcon={() =\u003e \u003cDoneIcon /\u003e}\n /*backgroundMenuItem={\"#ffb41b\"}\n colorMenuItem={\"#007bff\"}\n colorMenuItemSelect={\"#ffb41b\"}\n backgroundItemSelect={\"#007bff\"}*/\n /\u003e\n\n \u003cDialog\n open={open}\n onClose={() =\u003e this.handleDialog(false)}\n aria-labelledby=\"form-dialog-title\"\n \u003e\n \u003cDialogTitle id=\"form-dialog-title\" style={{ textAlign: \"center\" }}\u003e\n Create a new user\n \u003c/DialogTitle\u003e\n \u003cDialogContent\u003e\n \u003cMyTextField\n autoFocus\n margin=\"dense\"\n id=\"name\"\n label=\"Name\"\n type=\"text\"\n fullWidth\n onChange={this.onChangeField(\"name\")}\n /\u003e\n \u003cMyTextField\n margin=\"dense\"\n id=\"surname\"\n label=\"Surname\"\n type=\"text\"\n fullWidth\n onChange={this.onChangeField(\"surname\")}\n /\u003e\n \u003cMyTextField\n margin=\"dense\"\n id=\"address\"\n label=\"Address\"\n type=\"text\"\n fullWidth\n onChange={this.onChangeField(\"address\")}\n /\u003e\n \u003c/DialogContent\u003e\n \u003cDialogActions\u003e\n \u003cButton onClick={() =\u003e this.handleDialog(false)} color=\"primary\"\u003e\n Close\n \u003c/Button\u003e\n \u003cButton onClick={() =\u003e this.addUser()} color=\"primary\"\u003e\n Add\n \u003c/Button\u003e\n \u003c/DialogActions\u003e\n \u003c/Dialog\u003e\n \u003c/\u003e\n );\n }\n}\n```\n\nMenuItem:\n```javascript\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nconst MenuItem = ({ option }) =\u003e {\n return (\n \u003cdiv\u003e\n \u003cimg\n alt={option.label}\n src={option.picture}\n style={{\n height: \"24px\",\n marginRight: \"10px\",\n width: \"24px\",\n verticalAlign: \"middle\",\n borderRadius: \"50%\"\n }}\n /\u003e\n \u003cspan\u003e\n {option.name} ({option.email})\n \u003c/span\u003e\n \u003c/div\u003e\n );\n};\n\nMenuItem.propTypes = {\n option: PropTypes.shape({\n name: PropTypes.string.isRequired,\n surname: PropTypes.string.isRequired\n }).isRequired\n};\n\nexport default MenuItem;\n```\n\n## 💡 Props\n\n|Prop|Type|Default|Note|\n| - | - | - | - |\n|fullWidth|`boolean`|`false`||\n|options|`array`|||\n|onSearch|`function`|||\n|onChange|`function`|||\n|selectedItem|`obj`|||\n|renderMenuItemChildren|`function: optional`|`obj.label`||\n|labelKey|`function: optional`|`obj.label`||\n|placeholder|`string`|`Search`||\n|label|`string`|`Search`||\n|noResult|`function`|||\n|noFound|`string`|`No matches found.`||\n|backgroundColorChip|`string`|![#e0e0e0](https://placehold.it/15/e0e0e0/000000?text=+) `#e0e0e0`||\n|colorTextChip|`string`|![#000000](https://placehold.it/15/000000/000000?text=+) `#000000`||\n|colorDelete|`string`|![#00000042](https://placehold.it/15/00000042/000000?text=+) `rgba(0, 0, 0, 0.26)`||\n|avatar|`function: optional`|||\n|deleteIcon|`function: optional`|||\n|colorMenuItem|`string`|![#000000](https://placehold.it/15/000000/000000?text=+) `#000000`||\n|backgroundMenuItem|`string`|![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`||\n|colorMenuItemSelect|`string`|![#000000](https://placehold.it/15/000000/000000?text=+) `#000000` ||\n|backgroundItemSelect|`string`|![#e0e0e0](https://placehold.it/15/e0e0e0/000000?text=+) `#e0e0e0`||\n|loading|`boolean`|`false`||\n|backgroundColorLoading|`string`|![#f59c42](https://placehold.it/15/f59c42/000000?text=+) `#f59c42`||\n\n\n## 📜 License\nThis library is provided under the Apache License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-textinput-chip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaetanozappi%2Freact-textinput-chip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-textinput-chip/lists"}