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": "8348096a-794e-4a1c-b202-ecae5c03e9a3", "name": "Cory Kassulke", "username": "Chadrick26", "email": "Jamaal_Buckridge@yahoo.com", "address": { "street": "Erdman Light", "suite": 31639, "city": "South Etha", "zipcode": "86678", "geo": { "lat": "44.8035", "lng": "156.3241" } }, "phone": "(719) 396-3145", "website": "agitated-shampoo.org", "company": { "name": "Fisher, Gutkowski and Kautzer", "catchPhrase": "Pre-emptive leading edge service-desk", "bs": "transform back-end paradigms" } }, { "id": "4ae68938-739e-44b9-97f0-e226d03cb723", "name": "Dylan Boehm", "username": "Daniela_Denesik8", "email": "Juvenal_Nitzsche74@hotmail.com", "address": { "street": "Trycia Tunnel", "suite": 6405, "city": "Lake Rosario", "zipcode": "08361-3771", "geo": { "lat": "17.7476", "lng": "110.1411" } }, "phone": "(803) 255-5162 x53147", "website": "physical-guerrilla.com", "company": { "name": "Marks - Pollich", "catchPhrase": "Reverse-engineered value-added application", "bs": "engage world-class bandwidth" } }, { "id": "24857a60-c790-4655-89b3-9d7dbab0d71c", "name": "Leatha Raynor", "username": "Cora.Wisoky", "email": "Wilma.Haley@yahoo.com", "address": { "street": "Ophelia Drive", "suite": 43281, "city": "Hectorville", "zipcode": "42690-7968", "geo": { "lat": "-11.8322", "lng": "-176.7414" } }, "phone": "(397) 298-8807 x26519", "website": "occasional-marriage.biz", "company": { "name": "Beatty Inc", "catchPhrase": "Versatile mobile model", "bs": "evolve extensible bandwidth" } }, { "id": "a1da0fe5-2835-4805-80d2-d65ef3d6f6bb", "name": "Deron Windler", "username": "Kellen_Bahringer15", "email": "Lysanne.Crona@yahoo.com", "address": { "street": "Pagac Key", "suite": 54735, "city": "Port America", "zipcode": "35623-4916", "geo": { "lat": "55.2890", "lng": "-59.8857" } }, "phone": "1-583-225-4056", "website": "fortunate-rebel.com", "company": { "name": "Price, Cronin and Leuschke", "catchPhrase": "Seamless 6th generation interface", "bs": "seize mission-critical supply-chains" } }, { "id": "6f804a03-fdc5-43a5-a0ca-56e577b9bdf9", "name": "Camilla Braun", "username": "Candida.Watsica48", "email": "Tyrique_Gutkowski63@hotmail.com", "address": { "street": "Joanny Plains", "suite": 90145, "city": "Bartonburgh", "zipcode": "90934", "geo": { "lat": "-12.0472", "lng": "-98.3520" } }, "phone": "1-752-748-9849 x1366", "website": "faithful-public.name", "company": { "name": "Dare Group", "catchPhrase": "De-engineered system-worthy extranet", "bs": "synergize plug-and-play partnerships" } }, { "id": "107f7ece-f51e-4732-a8fc-5055244873dd", "name": "Felicity Hintz", "username": "Alejandrin_Schumm37", "email": "Jess_Dickens@gmail.com", "address": { "street": "Angelita Summit", "suite": 81957, "city": "Kemmerchester", "zipcode": "45999-0349", "geo": { "lat": "-51.8571", "lng": "142.3784" } }, "phone": "609.560.0393 x7271", "website": "gripping-minister.info", "company": { "name": "D'Amore LLC", "catchPhrase": "Pre-emptive multi-tasking hardware", "bs": "facilitate ubiquitous supply-chains" } }, { "id": "bbbf53b4-7a04-4a89-8b9c-fddb91c8e65d", "name": "Lenora Ziemann", "username": "Destin.Conroy", "email": "Martine.White@gmail.com", "address": { "street": "Osinski Glens", "suite": 54863, "city": "Hoppefort", "zipcode": "18838-6099", "geo": { "lat": "-4.4862", "lng": "145.2884" } }, "phone": "1-993-800-7889 x718", "website": "overjoyed-premium.biz", "company": { "name": "Ruecker Group", "catchPhrase": "Multi-channelled fault-tolerant frame", "bs": "optimize distributed e-services" } }, { "id": "065b54d3-73f1-4401-af7d-4e83c97a14d4", "name": "Sydnie Roob", "username": "Clay.Gerhold", "email": "Geraldine56@yahoo.com", "address": { "street": "Rau Centers", "suite": 66012, "city": "Lake Sonnyshire", "zipcode": "37220", "geo": { "lat": "-27.7355", "lng": "143.1348" } }, "phone": "1-479-596-7459 x42924", "website": "slimy-blast.biz", "company": { "name": "Frami, Price and McClure", "catchPhrase": "Enhanced fault-tolerant capacity", "bs": "disintermediate B2C mindshare" } }, { "id": "f5a63b01-216a-4ad0-8ac4-a938b293c567", "name": "Burley Klocko", "username": "Patsy.OConner", "email": "Rene60@hotmail.com", "address": { "street": "Anastacio Track", "suite": 22052, "city": "Hillsboro", "zipcode": "34336", "geo": { "lat": "-28.3836", "lng": "-105.4913" } }, "phone": "924.270.4731", "website": "authentic-twist.name", "company": { "name": "Kirlin, Gulgowski and Frami", "catchPhrase": "Decentralized multi-tasking open system", "bs": "syndicate impactful systems" } }, { "id": "5509efd1-c5e1-4383-9224-6115b63dcecb", "name": "Esteban Treutel", "username": "Lilliana.Osinski", "email": "Ken.Rempel33@hotmail.com", "address": { "street": "Prohaska Ways", "suite": 16081, "city": "Alfonzoborough", "zipcode": "93537", "geo": { "lat": "72.9692", "lng": "11.7499" } }, "phone": "(718) 366-7918 x9001", "website": "admired-effort.name", "company": { "name": "Larson - Gerlach", "catchPhrase": "Devolved solution-oriented Graphic Interface", "bs": "enable intuitive e-commerce" } }, { "id": "f30167b7-5ff8-4ec4-86bd-b99bd0a2585c", "name": "Lonie Wehner", "username": "Alyce_Hudson", "email": "Ephraim_OConnell@hotmail.com", "address": { "street": "Witting Prairie", "suite": 79735, "city": "Lake Albinhaven", "zipcode": "87498", "geo": { "lat": "32.7088", "lng": "115.8549" } }, "phone": "(463) 902-8324 x720", "website": "nippy-play.info", "company": { "name": "Stroman - Gulgowski", "catchPhrase": "Intuitive logistical success", "bs": "orchestrate scalable initiatives" } }, { "id": "8b11a8fb-1911-42c7-b1b2-f3ceed13e915", "name": "Arvel Emard", "username": "Ryleigh97", "email": "Torrance.Frami62@yahoo.com", "address": { "street": "Stiedemann Garden", "suite": 56408, "city": "Santa Cruz", "zipcode": "52470", "geo": { "lat": "57.4970", "lng": "16.6546" } }, "phone": "681-736-0178", "website": "agonizing-proposal.name", "company": { "name": "Wolff, Schiller and Feeney", "catchPhrase": "Innovative executive extranet", "bs": "synergize granular infrastructures" } }, { "id": "ec7250e0-4b33-4ffc-a93c-1526b24d0e84", "name": "Emiliano Greenfelder", "username": "Leslie_Auer", "email": "Aurelia_Pacocha@gmail.com", "address": { "street": "Heidenreich Forks", "suite": 22546, "city": "South Whittier", "zipcode": "32709-4436", "geo": { "lat": "17.9214", "lng": "-17.7084" } }, "phone": "370.858.8199", "website": "identical-zebrafish.net", "company": { "name": "Nitzsche - Hermiston", "catchPhrase": "Centralized foreground monitoring", "bs": "whiteboard viral niches" } }, { "id": "7293fe3e-4edb-408c-ad83-b29a3669b272", "name": "Lavonne McKenzie", "username": "Chris.Buckridge", "email": "Mina.Gerhold@gmail.com", "address": { "street": "Langworth Land", "suite": 16012, "city": "Lauderhill", "zipcode": "31018-7678", "geo": { "lat": "33.8855", "lng": "-89.2969" } }, "phone": "686.446.9558 x8207", "website": "threadbare-fat.biz", "company": { "name": "DuBuque and Sons", "catchPhrase": "Exclusive neutral open architecture", "bs": "aggregate robust technologies" } }, { "id": "4b28187e-e555-49c3-ad53-3c8027cd7bf8", "name": "Laverna Kerluke", "username": "Webster.Schumm12", "email": "Graciela42@hotmail.com", "address": { "street": "Goyette Station", "suite": 38295, "city": "Highland", "zipcode": "13095-1332", "geo": { "lat": "26.3490", "lng": "-98.4992" } }, "phone": "1-448-297-1379 x88009", "website": "sorrowful-coleslaw.com", "company": { "name": "Batz - McDermott", "catchPhrase": "Multi-layered hybrid structure", "bs": "whiteboard one-to-one platforms" } }, { "id": "773db10b-7c00-4c75-bb4e-1b8b145c7627", "name": "Torrance Erdman", "username": "Alexa.Stracke54", "email": "Ervin.Wolf56@yahoo.com", "address": { "street": "Mayert Mount", "suite": 56862, "city": "South Vernice", "zipcode": "65527", "geo": { "lat": "7.6205", "lng": "123.6057" } }, "phone": "703.543.6101 x57187", "website": "spanish-celery.com", "company": { "name": "Kautzer Inc", "catchPhrase": "Versatile upward-trending time-frame", "bs": "transform back-end niches" } }, { "id": "3f06ab29-5e4b-49b1-a1b6-3a9c42653bf0", "name": "Mary Feil", "username": "Sherman.Considine", "email": "Adela94@yahoo.com", "address": { "street": "Lebsack Land", "suite": 73378, "city": "Springdale", "zipcode": "47018-0882", "geo": { "lat": "36.3784", "lng": "70.0386" } }, "phone": "1-738-520-5207", "website": "thorny-wound.com", "company": { "name": "Kovacek - Fadel", "catchPhrase": "Digitized empowering knowledge base", "bs": "transform 24/365 bandwidth" } }, { "id": "266af104-2585-46bb-8d51-cf74e22a0db4", "name": "Clarissa Larkin", "username": "Zachary53", "email": "Ned_Bins40@yahoo.com", "address": { "street": "Keeling Cape", "suite": 2136, "city": "East Mazietown", "zipcode": "97839-4687", "geo": { "lat": "78.5196", "lng": "-63.4593" } }, "phone": "(888) 216-3321", "website": "slushy-snowflake.name", "company": { "name": "Boyle, Herzog and Schmitt", "catchPhrase": "User-centric leading edge toolset", "bs": "whiteboard intuitive e-commerce" } }, { "id": "7c074e38-ce14-45ba-ae63-eebf1172ebb1", "name": "Osvaldo Hermann", "username": "Felipe2", "email": "Jennyfer_Feest60@yahoo.com", "address": { "street": "Purdy Rapid", "suite": 75871, "city": "Olathe", "zipcode": "51487", "geo": { "lat": "-70.5847", "lng": "128.9876" } }, "phone": "775.447.2878", "website": "another-ficlet.org", "company": { "name": "Schmeler, McCullough and Dickens", "catchPhrase": "Cross-platform well-modulated project", "bs": "unleash best-of-breed eyeballs" } }, { "id": "75c11023-1336-45f4-9f45-90a5920f6321", "name": "Elody Harvey", "username": "Ahmed.Macejkovic", "email": "Wilmer.Carroll96@hotmail.com", "address": { "street": "Dibbert Freeway", "suite": 87100, "city": "East Anibal", "zipcode": "34153-7785", "geo": { "lat": "-40.2143", "lng": "83.5121" } }, "phone": "713.472.0184", "website": "impish-icon.org", "company": { "name": "Ledner - Dibbert", "catchPhrase": "Upgradable disintermediate open architecture", "bs": "whiteboard next-generation solutions" } }, { "id": "c79153e5-8be9-4ab1-8d3d-05ddd99ae089", "name": "Barry Prosacco", "username": "Beverly97", "email": "Zoila57@hotmail.com", "address": { "street": "Sam Mills", "suite": 86214, "city": "North Myahaven", "zipcode": "08280-5439", "geo": { "lat": "-14.0211", "lng": "50.6619" } }, "phone": "1-497-896-9368 x258", "website": "dramatic-dancing.net", "company": { "name": "Abshire - Fisher", "catchPhrase": "Public-key multi-state benchmark", "bs": "redefine back-end applications" } }, { "id": "26366b43-3b7e-4b35-a6d3-5580f124b7a4", "name": "Sydney Boyer", "username": "Laurence_Kuhlman", "email": "Kolby.Adams@hotmail.com", "address": { "street": "Marielle Club", "suite": 69080, "city": "Lake Hiltonstad", "zipcode": "03334-9645", "geo": { "lat": "87.9053", "lng": "155.9436" } }, "phone": "1-554-837-1341", "website": "rotating-anthropology.net", "company": { "name": "Wunsch - Gleichner", "catchPhrase": "Distributed holistic circuit", "bs": "brand dynamic architectures" } }, { "id": "a49558fa-807a-4508-84e9-04451748c350", "name": "Kristofer Kemmer", "username": "Joanny.Kub", "email": "Pink_Bergnaum75@gmail.com", "address": { "street": "Streich Gardens", "suite": 19077, "city": "Willmsport", "zipcode": "33565", "geo": { "lat": "70.3558", "lng": "-150.0032" } }, "phone": "1-358-386-2805", "website": "french-crinoline.biz", "company": { "name": "Bahringer, Cremin and Robel", "catchPhrase": "Programmable composite emulation", "bs": "productize mission-critical methodologies" } }, { "id": "f1cd3a78-72db-4c45-b018-184bcb632737", "name": "Rahul Pagac", "username": "Winona0", "email": "Heidi.Jacobson36@hotmail.com", "address": { "street": "Lempi Valleys", "suite": 61104, "city": "New Delpha", "zipcode": "13874-4908", "geo": { "lat": "59.9903", "lng": "164.9957" } }, "phone": "(699) 377-0401 x26450", "website": "wee-canteen.biz", "company": { "name": "McLaughlin Inc", "catchPhrase": "Persistent 3rd generation system engine", "bs": "architect vertical infrastructures" } }, { "id": "cd5f7599-66b7-4573-b333-17712f3aa9f8", "name": "Lukas Dietrich", "username": "Zita.White30", "email": "Don_Hodkiewicz43@yahoo.com", "address": { "street": "Emmet Point", "suite": 95038, "city": "Legroschester", "zipcode": "56182-8020", "geo": { "lat": "-17.8731", "lng": "-65.0976" } }, "phone": "1-921-220-9357 x4952", "website": "sharp-passion.net", "company": { "name": "Nader and Sons", "catchPhrase": "Exclusive executive Graphic Interface", "bs": "brand user-centric supply-chains" } }, { "id": "a22c1bea-b908-4782-995e-a4be21233935", "name": "Fae Pacocha", "username": "Ashlee71", "email": "Sammie.Glover@hotmail.com", "address": { "street": "Deckow Oval", "suite": 88496, "city": "Audreymouth", "zipcode": "03297-7443", "geo": { "lat": "12.0030", "lng": "62.3395" } }, "phone": "1-950-882-0850 x5286", "website": "sunny-portion.info", "company": { "name": "Paucek - Reichert", "catchPhrase": "Right-sized clear-thinking moderator", "bs": "whiteboard customized models" } }, { "id": "5d85e23d-45a8-489c-b4fc-694dfabdf51e", "name": "Josh Davis", "username": "Jeromy_Hintz93", "email": "Jennie61@yahoo.com", "address": { "street": "White Underpass", "suite": 21323, "city": "Port Adrianborough", "zipcode": "46206", "geo": { "lat": "-34.1640", "lng": "137.3985" } }, "phone": "476.365.9935 x9401", "website": "austere-clan.name", "company": { "name": "Runte - Langosh", "catchPhrase": "Decentralized dedicated encryption", "bs": "unleash killer channels" } }, { "id": "6cbc4353-0866-41e3-8eff-c1dcde40ad35", "name": "Unique Cummerata", "username": "Cecelia.Becker23", "email": "Beth.Fadel@gmail.com", "address": { "street": "Kiehn Keys", "suite": 5756, "city": "San Marcos", "zipcode": "98178", "geo": { "lat": "58.6177", "lng": "-63.2396" } }, "phone": "1-381-485-7613", "website": "immense-synonym.net", "company": { "name": "Lang, Fay and Witting", "catchPhrase": "Expanded asynchronous structure", "bs": "grow viral action-items" } }, { "id": "f4463682-6149-4852-898b-146eaa4b177d", "name": "Kennedy Leannon", "username": "Simeon_Kris83", "email": "Fiona55@gmail.com", "address": { "street": "Kirlin Oval", "suite": 15630, "city": "Broomfield", "zipcode": "82330", "geo": { "lat": "87.2713", "lng": "-38.1477" } }, "phone": "1-522-280-2857", "website": "plaintive-playroom.name", "company": { "name": "Boyle - Harber", "catchPhrase": "Seamless directional open architecture", "bs": "e-enable mission-critical e-business" } }, { "id": "d939eb53-ae69-459e-9b31-90cd23ccc754", "name": "Nathaniel Price", "username": "Wilfred_Effertz", "email": "Antoinette6@hotmail.com", "address": { "street": "Koelpin Turnpike", "suite": 46387, "city": "Torphyport", "zipcode": "15217-4587", "geo": { "lat": "-26.1598", "lng": "19.1894" } }, "phone": "(454) 394-5279 x49716", "website": "joyous-maternity.com", "company": { "name": "Erdman, Towne and Renner", "catchPhrase": "Diverse zero administration forecast", "bs": "recontextualize sticky infrastructures" } } ]
[ { "id": "a1da0fe5-2835-4805-80d2-d65ef3d6f6bb", "name": "Deron Windler", "username": "Kellen_Bahringer15", "email": "Lysanne.Crona@yahoo.com", "address": { "street": "Pagac Key", "suite": 54735, "city": "Port America", "zipcode": "35623-4916", "geo": { "lat": "55.2890", "lng": "-59.8857" } }, "phone": "1-583-225-4056", "website": "fortunate-rebel.com", "company": { "name": "Price, Cronin and Leuschke", "catchPhrase": "Seamless 6th generation interface", "bs": "seize mission-critical supply-chains" } } ]