Customisable dropdown select/multi-select component for react with custom render callback props to override inner components
SHELLnpm install --save react-dropdown-select
JSXimport Select from 'react-dropdown-select';
export const App = ({ options }) => (
<Select
multi
options={options}
onChange={(values) => this.onChange(values)}
/>
);
Multi
Disabled
Loading
Clearable
Searchable
Create new entries
Separator
Dropdown handle
Stay open
Custom content renderer
Custom dropdown renderer
Custom dropdown item renderer
Keep selected item in a list
Close dropdown on select/deselect
Close dropdown on click input
Custom color
Dropdown position
Dropdown Height:
Dropdown direction
Add placeholder:
Search by field:
Label field:
Value field:
[ { "id": "62756c3c-2918-4bd7-a07f-43fc73af5c87", "name": "Clair Stark", "username": "Maxie.Ward", "email": "Korey_Monahan25@hotmail.com", "address": { "street": "Lew View", "suite": 47900, "city": "Frederiqueview", "zipcode": "33645-7088", "geo": { "lat": "33.0548", "lng": "-132.8900" } }, "phone": "569.998.3437", "website": "palatable-alligator.org", "company": { "name": "Maggio Inc", "catchPhrase": "Devolved interactive methodology", "bs": "architect sticky convergence" } }, { "id": "6ff7428d-c2ac-45f1-a6c0-6559670012c0", "name": "Layne Roob", "username": "Cornell67", "email": "Ambrose_Purdy@gmail.com", "address": { "street": "Sincere Estates", "suite": 36355, "city": "South Hill", "zipcode": "59559", "geo": { "lat": "-12.2884", "lng": "-116.2911" } }, "phone": "1-639-883-8668 x3462", "website": "sudden-lashes.name", "company": { "name": "Crooks Inc", "catchPhrase": "Diverse even-keeled local area network", "bs": "deliver revolutionary niches" } }, { "id": "c986c09d-87ee-48d6-9a44-a97c070dc75a", "name": "Bernhard White", "username": "Lafayette_Franey", "email": "Camden_Will@yahoo.com", "address": { "street": "Zboncak Valley", "suite": 44169, "city": "Port Hannahbury", "zipcode": "46293", "geo": { "lat": "-52.0701", "lng": "55.2864" } }, "phone": "592.538.3651 x3935", "website": "smart-comfort.biz", "company": { "name": "Mante - Daugherty", "catchPhrase": "Robust multimedia knowledge user", "bs": "evolve front-end channels" } }, { "id": "0e432f6f-7b9a-4170-935d-a3266ca65795", "name": "Estrella Gislason", "username": "Kyla_Kuhn", "email": "Kris73@yahoo.com", "address": { "street": "Brain Run", "suite": 45425, "city": "South Nedra", "zipcode": "16898-4760", "geo": { "lat": "-59.6555", "lng": "95.8670" } }, "phone": "(899) 830-6771", "website": "well-lit-catalysis.name", "company": { "name": "Considine LLC", "catchPhrase": "Innovative bifurcated knowledge user", "bs": "unleash plug-and-play eyeballs" } }, { "id": "eff2f3a3-4f89-4c37-95d4-2e86da2be765", "name": "Rasheed Cruickshank", "username": "Elenora.Littel", "email": "Providenci_Larson94@hotmail.com", "address": { "street": "Reynolds Hollow", "suite": 18726, "city": "Bergstromchester", "zipcode": "48453", "geo": { "lat": "58.7387", "lng": "-172.8125" } }, "phone": "925.907.4535", "website": "enormous-rainbow.name", "company": { "name": "Oberbrunner, Williamson and Herzog", "catchPhrase": "Fundamental value-added system engine", "bs": "repurpose clicks-and-mortar web-readiness" } }, { "id": "913666ea-5620-49d0-b219-62418679b3e1", "name": "Abigail Rath", "username": "Katharina.Weissnat76", "email": "Magdalena89@hotmail.com", "address": { "street": "Ciara Forge", "suite": 21727, "city": "Chaneltown", "zipcode": "63520-2941", "geo": { "lat": "-72.8325", "lng": "-102.1766" } }, "phone": "(558) 264-3711 x5321", "website": "unrealistic-unique.biz", "company": { "name": "Zemlak Group", "catchPhrase": "Advanced 4th generation superstructure", "bs": "transition scalable synergies" } }, { "id": "11f27629-6fc5-446a-85ff-b0bda6585c4c", "name": "Dillon Murphy", "username": "Hulda38", "email": "Karianne29@hotmail.com", "address": { "street": "Ottilie Canyon", "suite": 37203, "city": "Lacey", "zipcode": "05425", "geo": { "lat": "6.4753", "lng": "33.9295" } }, "phone": "355-772-4399", "website": "tasty-sequence.org", "company": { "name": "D'Amore - Schowalter", "catchPhrase": "Object-based actuating synergy", "bs": "orchestrate 24/365 functionalities" } }, { "id": "77048378-cb54-4800-9728-996dd99920e4", "name": "Boyd Hammes", "username": "Noelia.Rolfson98", "email": "Marjolaine_Borer@yahoo.com", "address": { "street": "Gianni Parkways", "suite": 81980, "city": "Lexington-Fayette", "zipcode": "29855", "geo": { "lat": "89.2776", "lng": "22.0153" } }, "phone": "1-683-556-0846 x932", "website": "conventional-grain.biz", "company": { "name": "Okuneva, Corwin and Conroy", "catchPhrase": "Function-based homogeneous frame", "bs": "architect cross-media systems" } }, { "id": "9078d831-c19d-4393-9e90-e2104b357c37", "name": "Alyson O'Kon", "username": "Verona92", "email": "Ricardo.Zieme12@yahoo.com", "address": { "street": "Will Way", "suite": 96615, "city": "Connfurt", "zipcode": "28318-7676", "geo": { "lat": "53.3648", "lng": "112.1343" } }, "phone": "1-542-231-1139 x414", "website": "vacant-health.info", "company": { "name": "Connelly, Zulauf and Oberbrunner", "catchPhrase": "Fundamental actuating knowledge base", "bs": "cultivate robust portals" } }, { "id": "06c43061-daea-44d5-aea6-6863220631cc", "name": "Colten Bartoletti", "username": "Nathen.Thiel", "email": "Felton69@gmail.com", "address": { "street": "Amani Garden", "suite": 45534, "city": "South Benedictstad", "zipcode": "32523", "geo": { "lat": "23.2728", "lng": "-109.8762" } }, "phone": "796.247.5880 x862", "website": "scientific-eviction.org", "company": { "name": "Schimmel - Heaney", "catchPhrase": "Upgradable homogeneous groupware", "bs": "harness collaborative communities" } }, { "id": "d84ce58c-d963-4030-a492-77d3844be01a", "name": "Rosalia Kris", "username": "Irving23", "email": "Evalyn.Frami55@gmail.com", "address": { "street": "Daija Keys", "suite": 12914, "city": "Livermore", "zipcode": "27548", "geo": { "lat": "40.4839", "lng": "20.8302" } }, "phone": "1-561-671-1441 x6273", "website": "able-oatmeal.org", "company": { "name": "Schiller Inc", "catchPhrase": "Networked uniform emulation", "bs": "harness front-end e-markets" } }, { "id": "0a879ff2-250b-461b-8472-99720d1f9e5f", "name": "Jorge Parisian", "username": "Princess86", "email": "Benedict36@yahoo.com", "address": { "street": "Creola Place", "suite": 78551, "city": "Osvaldofurt", "zipcode": "87328", "geo": { "lat": "-46.6861", "lng": "42.4140" } }, "phone": "(782) 512-3551 x8564", "website": "cooperative-sake.info", "company": { "name": "Miller - Ankunding", "catchPhrase": "Re-contextualized explicit matrices", "bs": "brand proactive synergies" } }, { "id": "5ab69335-f07f-4f34-8c54-1515948f6d8f", "name": "Keshawn Veum", "username": "Dustin73", "email": "Nona.Kilback@yahoo.com", "address": { "street": "Deanna Glens", "suite": 55408, "city": "West Efren", "zipcode": "54927-9787", "geo": { "lat": "-21.7501", "lng": "7.8872" } }, "phone": "1-971-207-6230", "website": "wee-fork.org", "company": { "name": "Murazik - Hodkiewicz", "catchPhrase": "Inverse bi-directional hub", "bs": "target 24/7 functionalities" } }, { "id": "6aa9aec8-40b3-4319-8dc4-e4d9fc20080a", "name": "Celestino Farrell", "username": "Pascale_Kautzer31", "email": "Deshaun_Gutmann@gmail.com", "address": { "street": "Orn Radial", "suite": 72811, "city": "Hermannhaven", "zipcode": "79138-0097", "geo": { "lat": "-15.9649", "lng": "-160.4513" } }, "phone": "254.997.4878 x328", "website": "blaring-announcement.com", "company": { "name": "Rice LLC", "catchPhrase": "Proactive executive adapter", "bs": "repurpose 24/7 e-business" } }, { "id": "6b5f9bd6-1084-46c0-889b-b1a4411abec9", "name": "Jacky Deckow", "username": "Aimee17", "email": "Citlalli_Rath@yahoo.com", "address": { "street": "Ocie Cliff", "suite": 91532, "city": "Harveyton", "zipcode": "41163-2793", "geo": { "lat": "-4.7983", "lng": "1.7790" } }, "phone": "(482) 961-4165", "website": "questionable-completion.name", "company": { "name": "Yost, Hoppe and Schamberger", "catchPhrase": "Synchronised stable concept", "bs": "incentivize 24/7 applications" } }, { "id": "158eaddb-6a0e-4562-b91e-755196cbaf92", "name": "Charlene Aufderhar", "username": "Brain_Leffler70", "email": "Louvenia.Bednar47@hotmail.com", "address": { "street": "Reyes Rest", "suite": 94100, "city": "Novi", "zipcode": "25764-4471", "geo": { "lat": "65.5660", "lng": "-23.2413" } }, "phone": "(781) 234-0484 x428", "website": "rotating-llama.name", "company": { "name": "Sporer - Stiedemann", "catchPhrase": "Enhanced grid-enabled success", "bs": "enable impactful communities" } }, { "id": "e9f895e4-cf13-4681-a71a-ee1f92d004a6", "name": "Annabel Abernathy", "username": "Claudia87", "email": "Kailey14@yahoo.com", "address": { "street": "Gutmann Haven", "suite": 96911, "city": "New Aleentown", "zipcode": "88726", "geo": { "lat": "61.2474", "lng": "-68.1782" } }, "phone": "(540) 607-4407", "website": "negative-antler.info", "company": { "name": "Maggio - Fisher", "catchPhrase": "Organic attitude-oriented time-frame", "bs": "strategize revolutionary infrastructures" } }, { "id": "a12a6f31-952c-4b5e-800b-a5dd06137a4b", "name": "Lazaro Moen", "username": "Jovani94", "email": "Cade44@yahoo.com", "address": { "street": "Schuster Springs", "suite": 24388, "city": "Leuschkemouth", "zipcode": "97853-2004", "geo": { "lat": "-28.1068", "lng": "21.5793" } }, "phone": "853-708-4237", "website": "flickering-inhibitor.com", "company": { "name": "Mann, Dooley and Runolfsson", "catchPhrase": "Enhanced bi-directional analyzer", "bs": "unleash extensible initiatives" } }, { "id": "fb85a12c-e1ae-43ec-bdf1-dc69c8508b3d", "name": "Andy O'Hara", "username": "Devin_Streich24", "email": "Cecilia62@gmail.com", "address": { "street": "Brown Locks", "suite": 27946, "city": "Steuberside", "zipcode": "61707", "geo": { "lat": "14.8521", "lng": "32.5268" } }, "phone": "350.416.0293", "website": "boring-guilty.name", "company": { "name": "Emmerich Inc", "catchPhrase": "Proactive secondary firmware", "bs": "disintermediate end-to-end eyeballs" } }, { "id": "86b9a7fc-4f3b-4f46-9967-624775eb7ee0", "name": "Annalise Pouros", "username": "Aliza_Braun74", "email": "Sincere55@hotmail.com", "address": { "street": "Noe Spurs", "suite": 17696, "city": "Lake Kirstinfurt", "zipcode": "66806", "geo": { "lat": "70.5069", "lng": "-145.8222" } }, "phone": "336.599.0206 x49614", "website": "acclaimed-heart-throb.biz", "company": { "name": "Ondricka Group", "catchPhrase": "Seamless 24 hour moderator", "bs": "matrix cross-platform platforms" } }, { "id": "95645cac-2f0c-407b-bd0f-9fcccfc96aea", "name": "Nova Dicki", "username": "Roderick7", "email": "Audie_Kihn@hotmail.com", "address": { "street": "Wisoky Street", "suite": 52711, "city": "West Junius", "zipcode": "92009-6799", "geo": { "lat": "88.5486", "lng": "154.3577" } }, "phone": "1-747-311-1833 x9997", "website": "determined-notebook.com", "company": { "name": "Walker - Raynor", "catchPhrase": "Robust holistic leverage", "bs": "maximize dot-com applications" } }, { "id": "01f925bf-0360-4656-a006-c2ba0880a386", "name": "Tanya Marvin", "username": "Sydnee55", "email": "Edythe_Klocko68@hotmail.com", "address": { "street": "Jesus Route", "suite": 80873, "city": "Port Inestown", "zipcode": "50394", "geo": { "lat": "-27.9492", "lng": "-82.7614" } }, "phone": "1-673-491-5855 x1042", "website": "descriptive-cleft.net", "company": { "name": "MacGyver - Hand", "catchPhrase": "User-friendly full-range circuit", "bs": "synthesize enterprise ROI" } }, { "id": "360a0dd0-064f-46d4-8bac-b5062c27cb25", "name": "Maia Nicolas", "username": "Vincenzo_Wolff3", "email": "Maybell10@yahoo.com", "address": { "street": "Enrique Well", "suite": 69982, "city": "Erashire", "zipcode": "45137", "geo": { "lat": "-27.0708", "lng": "157.0580" } }, "phone": "365.391.2217", "website": "noisy-fashion.name", "company": { "name": "Gislason - Rutherford", "catchPhrase": "Enterprise-wide fresh-thinking encryption", "bs": "exploit end-to-end portals" } }, { "id": "38fda576-bfa6-4c9b-85d4-508a8e1bfefe", "name": "Gerda Hermann", "username": "Lily96", "email": "Melissa.Stiedemann94@hotmail.com", "address": { "street": "Constantin Fall", "suite": 15664, "city": "South Mckayla", "zipcode": "78336", "geo": { "lat": "86.7559", "lng": "-110.9246" } }, "phone": "(997) 946-5149 x112", "website": "thorny-council.com", "company": { "name": "Bogisich and Sons", "catchPhrase": "Right-sized mission-critical functionalities", "bs": "synthesize seamless e-tailers" } }, { "id": "2431837e-7562-49c8-a9c6-934257acde26", "name": "Cali Auer", "username": "Valentine_Gorczany", "email": "Evan_Wehner16@hotmail.com", "address": { "street": "Kutch Prairie", "suite": 49497, "city": "Wesley Chapel", "zipcode": "87393-1349", "geo": { "lat": "46.4740", "lng": "-141.9520" } }, "phone": "(573) 810-8334 x853", "website": "guilty-atom.name", "company": { "name": "Lang LLC", "catchPhrase": "Future-proofed asynchronous open system", "bs": "transition magnetic applications" } }, { "id": "b20c61f9-9ea0-4b8c-98f3-55ef14b50459", "name": "Lesley Bechtelar", "username": "Buck_Cormier", "email": "Kelton_Welch@hotmail.com", "address": { "street": "Danielle Turnpike", "suite": 2089, "city": "New Estelfurt", "zipcode": "25949", "geo": { "lat": "-86.3686", "lng": "93.0084" } }, "phone": "392-648-7224", "website": "slow-cope.com", "company": { "name": "Jones Group", "catchPhrase": "Devolved regional matrices", "bs": "mesh cutting-edge infrastructures" } }, { "id": "a0b60122-e628-4d79-8be8-f0a509924559", "name": "Moises Ledner", "username": "Erica_Will", "email": "Andrew_Ankunding62@hotmail.com", "address": { "street": "Meghan Way", "suite": 14560, "city": "Lake Lavina", "zipcode": "19488", "geo": { "lat": "84.0379", "lng": "-73.2312" } }, "phone": "(311) 746-2117 x24996", "website": "hopeful-trooper.com", "company": { "name": "Wehner - Shanahan", "catchPhrase": "Persistent demand-driven architecture", "bs": "engineer efficient infomediaries" } }, { "id": "8f5e3950-a531-40ff-9e9a-e0c73629964a", "name": "William Buckridge", "username": "Flo98", "email": "Alvah41@hotmail.com", "address": { "street": "Schmidt Stravenue", "suite": 50251, "city": "Salem", "zipcode": "59366-5110", "geo": { "lat": "-23.3950", "lng": "37.8102" } }, "phone": "1-303-940-0802 x8672", "website": "creepy-burning.com", "company": { "name": "Ritchie and Sons", "catchPhrase": "De-engineered fault-tolerant initiative", "bs": "enhance magnetic convergence" } }, { "id": "3ab7b59d-bbe6-4893-a72c-463c559d12da", "name": "Agustin Ankunding", "username": "Tommie_Schoen37", "email": "Tavares_Nikolaus@gmail.com", "address": { "street": "Block Meadows", "suite": 49024, "city": "Lawrence", "zipcode": "04429-4340", "geo": { "lat": "5.9637", "lng": "170.5322" } }, "phone": "(550) 978-1124", "website": "ugly-poultry.info", "company": { "name": "Fay, Ortiz and Reichert", "catchPhrase": "Face to face fault-tolerant application", "bs": "harness magnetic solutions" } }, { "id": "548fbe75-81a0-45b5-a900-83e30596dd06", "name": "Clarabelle Kerluke", "username": "Talon_Howell27", "email": "Eric.Moore@gmail.com", "address": { "street": "Morissette Mission", "suite": 26328, "city": "Willfurt", "zipcode": "08075", "geo": { "lat": "-17.2172", "lng": "40.0770" } }, "phone": "1-261-776-4908", "website": "dry-spice.name", "company": { "name": "Ondricka LLC", "catchPhrase": "Upgradable zero administration info-mediaries", "bs": "utilize value-added e-markets" } } ]
[ { "id": "0e432f6f-7b9a-4170-935d-a3266ca65795", "name": "Estrella Gislason", "username": "Kyla_Kuhn", "email": "Kris73@yahoo.com", "address": { "street": "Brain Run", "suite": 45425, "city": "South Nedra", "zipcode": "16898-4760", "geo": { "lat": "-59.6555", "lng": "95.8670" } }, "phone": "(899) 830-6771", "website": "well-lit-catalysis.name", "company": { "name": "Considine LLC", "catchPhrase": "Innovative bifurcated knowledge user", "bs": "unleash plug-and-play eyeballs" } } ]