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": "d0e6e2c8-52a3-4fee-b068-6b0981545052", "name": "Tess Breitenberg", "username": "Vincent91", "email": "Leanne_Bins@hotmail.com", "address": { "street": "Brooklyn Green", "suite": 38525, "city": "Cambridge", "zipcode": "59218", "geo": { "lat": "-87.0898", "lng": "37.9883" } }, "phone": "806-293-5274 x97296", "website": "right-beast.info", "company": { "name": "Murphy, Nicolas and Stroman", "catchPhrase": "Down-sized needs-based time-frame", "bs": "seize sticky interfaces" } }, { "id": "e4c6e694-3469-4828-a989-ced090a7951e", "name": "Loy Bailey", "username": "Maximillian_Murazik18", "email": "Murphy.Predovic@hotmail.com", "address": { "street": "Johnston Fords", "suite": 29159, "city": "Oberbrunnerstad", "zipcode": "88808-5773", "geo": { "lat": "-69.6983", "lng": "-108.6035" } }, "phone": "430.946.4045 x32501", "website": "digital-punctuation.biz", "company": { "name": "Murphy - Gorczany", "catchPhrase": "Robust bifurcated forecast", "bs": "disintermediate real-time applications" } }, { "id": "e681ffba-a456-442e-bfc1-9844a1d7e3f8", "name": "Kip Stoltenberg", "username": "Colin.Bechtelar", "email": "Tyrique.Kreiger@gmail.com", "address": { "street": "Eda Shore", "suite": 42540, "city": "New Karen", "zipcode": "54900", "geo": { "lat": "30.4427", "lng": "72.1075" } }, "phone": "1-349-328-6025 x43040", "website": "dutiful-creature.info", "company": { "name": "Baumbach, Okuneva and Fisher", "catchPhrase": "Cross-platform eco-centric groupware", "bs": "synthesize web-enabled convergence" } }, { "id": "95d4ed85-3603-41f0-8274-61e0ae1609b5", "name": "Sherwood Macejkovic", "username": "Murl39", "email": "Gabrielle69@yahoo.com", "address": { "street": "Daren Trail", "suite": 72773, "city": "West Sigmundbury", "zipcode": "06976-2823", "geo": { "lat": "-3.1493", "lng": "26.6207" } }, "phone": "1-357-867-9058 x381", "website": "frayed-consent.com", "company": { "name": "Frami Inc", "catchPhrase": "Synergistic actuating database", "bs": "extend compelling architectures" } }, { "id": "d3ca3bec-145b-4b96-92a8-b656939b79eb", "name": "Jordane Carroll", "username": "Lawrence.Heaney65", "email": "Wyman36@yahoo.com", "address": { "street": "Camila Loop", "suite": 99820, "city": "West Ayla", "zipcode": "21593", "geo": { "lat": "62.1974", "lng": "-67.9668" } }, "phone": "(575) 959-0211 x674", "website": "musty-cross-stitch.biz", "company": { "name": "Herman - Pollich", "catchPhrase": "Enterprise-wide analyzing attitude", "bs": "engineer ubiquitous e-markets" } }, { "id": "511b736f-b179-4ddd-8e80-4afa5345e669", "name": "Bethel Shanahan", "username": "Joanne.Ward77", "email": "Conrad0@hotmail.com", "address": { "street": "Kerluke Center", "suite": 43726, "city": "Octaviatown", "zipcode": "15823", "geo": { "lat": "10.8792", "lng": "-99.8231" } }, "phone": "383-239-9198 x209", "website": "verifiable-tolerance.org", "company": { "name": "Jacobi Group", "catchPhrase": "Open-architected stable productivity", "bs": "cultivate impactful e-business" } }, { "id": "be8b3e51-e517-403a-9505-8e612bd7c78f", "name": "Diana Russel", "username": "Zakary.OKeefe", "email": "Stephanie.Altenwerth@yahoo.com", "address": { "street": "Louie Viaduct", "suite": 37439, "city": "Mansfield", "zipcode": "14479", "geo": { "lat": "78.7539", "lng": "-80.9580" } }, "phone": "462-332-5342 x8912", "website": "basic-durian.name", "company": { "name": "Mohr LLC", "catchPhrase": "User-friendly mission-critical approach", "bs": "engineer compelling infrastructures" } }, { "id": "e5fdfb36-a56c-48bf-bf6e-f03478fc556b", "name": "Kay Christiansen", "username": "Jackson_Hayes6", "email": "Reba.Hilpert@gmail.com", "address": { "street": "Sauer Trafficway", "suite": 22272, "city": "Vanessaview", "zipcode": "15720-5512", "geo": { "lat": "0.3278", "lng": "147.3674" } }, "phone": "(262) 324-8626 x491", "website": "humming-end.biz", "company": { "name": "Rippin, Hessel and Macejkovic", "catchPhrase": "Compatible zero defect workforce", "bs": "incubate one-to-one technologies" } }, { "id": "e2d44f86-d317-424c-9599-bd210fa2ad8e", "name": "Amie Dietrich", "username": "Robbie48", "email": "Vilma_Reichel96@yahoo.com", "address": { "street": "Lehner Estates", "suite": 96700, "city": "Clarksville", "zipcode": "50556", "geo": { "lat": "-37.9562", "lng": "123.4153" } }, "phone": "(378) 255-7665 x486", "website": "warm-mailbox.name", "company": { "name": "Casper, Deckow and Buckridge", "catchPhrase": "Mandatory composite forecast", "bs": "embrace out-of-the-box users" } }, { "id": "763208ee-5ec7-47e4-89cd-f23516c44bc1", "name": "Issac McLaughlin", "username": "Maye53", "email": "Rosamond.Lang@hotmail.com", "address": { "street": "Walter Passage", "suite": 84541, "city": "South Dakotamouth", "zipcode": "19503-9829", "geo": { "lat": "-12.6460", "lng": "128.9474" } }, "phone": "932.389.0929", "website": "dopey-avocado.name", "company": { "name": "Will Group", "catchPhrase": "Balanced asynchronous circuit", "bs": "implement dynamic supply-chains" } }, { "id": "a378a494-0101-482b-893c-6b5ea201fb1c", "name": "Antonia Mante", "username": "Lilla.Skiles7", "email": "Jermaine.Gutmann@gmail.com", "address": { "street": "Queen Road", "suite": 26645, "city": "Shadville", "zipcode": "20897", "geo": { "lat": "33.9834", "lng": "-125.4934" } }, "phone": "528-402-5015 x47837", "website": "turbulent-chug.biz", "company": { "name": "Swift, Ratke and Leuschke", "catchPhrase": "Streamlined modular capacity", "bs": "envisioneer synergistic solutions" } }, { "id": "673597a8-3deb-4031-9378-139673433a54", "name": "Eve Ortiz", "username": "Laverne37", "email": "Kellie.Bayer@gmail.com", "address": { "street": "Luettgen Ville", "suite": 82658, "city": "Port Isabellemouth", "zipcode": "81507", "geo": { "lat": "57.3349", "lng": "111.1864" } }, "phone": "(629) 595-7668 x1084", "website": "shrill-tumbler.com", "company": { "name": "Heaney - MacGyver", "catchPhrase": "Self-enabling systematic help-desk", "bs": "iterate impactful communities" } }, { "id": "146d37e2-9856-4ae3-b860-e578d41b86a5", "name": "Kaleigh Daniel", "username": "Tabitha62", "email": "Albin_Becker46@gmail.com", "address": { "street": "Watsica Street", "suite": 16411, "city": "Lake Cadeport", "zipcode": "58220", "geo": { "lat": "71.2817", "lng": "-87.9724" } }, "phone": "811.616.5245 x56725", "website": "messy-sledge.name", "company": { "name": "Wiegand, Hagenes and Heathcote", "catchPhrase": "Implemented 4th generation infrastructure", "bs": "optimize rich deliverables" } }, { "id": "ff293890-4e96-421b-a50d-c1de2c7fcb07", "name": "Skye Balistreri", "username": "Elise34", "email": "Clementina.Nader@hotmail.com", "address": { "street": "Berge Valley", "suite": 59785, "city": "New Mabelle", "zipcode": "90830-3510", "geo": { "lat": "-53.1983", "lng": "52.6500" } }, "phone": "1-355-616-1136 x937", "website": "famous-recruit.biz", "company": { "name": "Dibbert Inc", "catchPhrase": "Virtual background superstructure", "bs": "reintermediate vertical e-markets" } }, { "id": "901f097a-a2ee-4657-bf3e-16a5c80ed6df", "name": "Luigi Leuschke", "username": "Aryanna_Pollich", "email": "Litzy.Robel20@gmail.com", "address": { "street": "Delbert Creek", "suite": 1347, "city": "West Louborough", "zipcode": "02151-4285", "geo": { "lat": "-8.5642", "lng": "9.3057" } }, "phone": "575-718-5822 x77433", "website": "corrupt-wholesale.com", "company": { "name": "Price - Fisher", "catchPhrase": "Intuitive impactful product", "bs": "revolutionize e-business mindshare" } }, { "id": "d6dfc296-1bef-4915-af75-45e37302d936", "name": "Claud Fisher", "username": "Gregory_Batz30", "email": "Jordyn_Farrell38@hotmail.com", "address": { "street": "Orion Mill", "suite": 95319, "city": "Noemieview", "zipcode": "26856", "geo": { "lat": "87.2108", "lng": "-53.8961" } }, "phone": "(247) 416-4376 x6040", "website": "electric-clarinet.com", "company": { "name": "Mohr - Jaskolski", "catchPhrase": "Multi-layered bandwidth-monitored solution", "bs": "whiteboard seamless architectures" } }, { "id": "c3a3ad54-d48f-4a46-9bde-ef336438bc3d", "name": "Hayden Murray", "username": "Barry19", "email": "Sadye.Stark@gmail.com", "address": { "street": "Lind Crescent", "suite": 13712, "city": "Victorville", "zipcode": "53395", "geo": { "lat": "-47.3122", "lng": "-36.9644" } }, "phone": "1-878-748-3030", "website": "worried-crap.biz", "company": { "name": "Larson, Collins and Effertz", "catchPhrase": "Seamless mobile open system", "bs": "benchmark enterprise systems" } }, { "id": "4390a710-23ba-434e-8490-ea83e7b03d0d", "name": "Dahlia Weber", "username": "Ernestina21", "email": "Vernice11@hotmail.com", "address": { "street": "Ruecker Glen", "suite": 56343, "city": "New Ramonmouth", "zipcode": "08626", "geo": { "lat": "83.9417", "lng": "-139.1373" } }, "phone": "(515) 672-5549", "website": "lazy-shopper.name", "company": { "name": "Auer Group", "catchPhrase": "Cloned heuristic parallelism", "bs": "unleash best-of-breed markets" } }, { "id": "26ee47b3-3792-4e88-acf2-31dac97b455e", "name": "Jonas Hirthe", "username": "Elise94", "email": "Martina60@gmail.com", "address": { "street": "Crooks Lake", "suite": 20195, "city": "Lawrence", "zipcode": "84852", "geo": { "lat": "-67.6514", "lng": "-165.0018" } }, "phone": "(556) 401-7340 x284", "website": "thick-beauty.org", "company": { "name": "Conroy Group", "catchPhrase": "Devolved didactic groupware", "bs": "reintermediate real-time schemas" } }, { "id": "da548a4e-0d5e-4983-addd-8597dd173001", "name": "Destiney Haley", "username": "Holden_Hudson", "email": "Hillary.Sawayn91@gmail.com", "address": { "street": "Feil Drives", "suite": 47269, "city": "Lake Elody", "zipcode": "98822-0202", "geo": { "lat": "-73.7554", "lng": "-103.8684" } }, "phone": "1-845-654-1345", "website": "lonely-nerve.name", "company": { "name": "Ledner - Funk", "catchPhrase": "Mandatory global collaboration", "bs": "orchestrate B2B relationships" } }, { "id": "b69ada49-a349-4de5-b4df-e00de0cd9b69", "name": "Hanna Schneider", "username": "Devan70", "email": "Terry_Flatley53@gmail.com", "address": { "street": "Daren Landing", "suite": 3317, "city": "Yundtborough", "zipcode": "31609-0624", "geo": { "lat": "-31.0993", "lng": "125.1394" } }, "phone": "(329) 588-5562", "website": "long-quiet.com", "company": { "name": "Fay, Hand and Senger", "catchPhrase": "Operative encompassing pricing structure", "bs": "expedite efficient solutions" } }, { "id": "10481fad-e1a1-405b-aa4f-b8587cef9c77", "name": "Dayna Sanford", "username": "Curtis12", "email": "Dena8@yahoo.com", "address": { "street": "Margie Station", "suite": 11758, "city": "Leonemouth", "zipcode": "36610", "geo": { "lat": "-75.7485", "lng": "168.3807" } }, "phone": "1-712-423-3251 x4963", "website": "juvenile-freon.info", "company": { "name": "Moore Inc", "catchPhrase": "Organic intangible internet solution", "bs": "brand cross-media e-tailers" } }, { "id": "f21c6646-4034-412d-bb16-957b483aa4f7", "name": "Nick Simonis", "username": "Judy_OKeefe", "email": "Ryder.Sipes@gmail.com", "address": { "street": "Kertzmann Highway", "suite": 99756, "city": "Harrisburg", "zipcode": "70655", "geo": { "lat": "-65.6663", "lng": "60.8600" } }, "phone": "(583) 204-8425", "website": "hungry-lizard.net", "company": { "name": "Schuppe - Batz", "catchPhrase": "Networked grid-enabled help-desk", "bs": "facilitate best-of-breed bandwidth" } }, { "id": "9c905be9-a9fa-4b6d-8749-6a54848d91f8", "name": "April Hudson", "username": "Laury_Parker", "email": "Rita.Kuhn80@gmail.com", "address": { "street": "Ebert Mills", "suite": 24034, "city": "Michalefort", "zipcode": "05673", "geo": { "lat": "38.2291", "lng": "-68.5607" } }, "phone": "1-682-388-5757 x967", "website": "untrue-signup.org", "company": { "name": "Gutmann LLC", "catchPhrase": "Open-source composite adapter", "bs": "matrix interactive portals" } }, { "id": "92b1ee1b-309a-407a-a041-64022bcc55f8", "name": "Saul Dicki", "username": "Dillan.Morissette19", "email": "Jaunita_Veum@yahoo.com", "address": { "street": "Caitlyn Spur", "suite": 14243, "city": "Lake Vicenta", "zipcode": "34277", "geo": { "lat": "59.7666", "lng": "-145.9353" } }, "phone": "1-361-720-3663", "website": "wrong-behalf.name", "company": { "name": "Veum and Sons", "catchPhrase": "Mandatory disintermediate orchestration", "bs": "embrace scalable infrastructures" } }, { "id": "69a3b53e-23cc-4c35-bcbc-3299e6f2761f", "name": "Ernestine Ledner", "username": "June79", "email": "Bria.Spinka12@hotmail.com", "address": { "street": "Stamm Corner", "suite": 88523, "city": "East Meaghanbury", "zipcode": "40535-7974", "geo": { "lat": "-42.8706", "lng": "5.9584" } }, "phone": "223.328.5487", "website": "unhappy-cantaloupe.name", "company": { "name": "Hills - Murray", "catchPhrase": "Implemented radical ability", "bs": "transform best-of-breed ROI" } }, { "id": "9e986c6e-f519-4642-bd15-432bd41ddd39", "name": "Myrtis Botsford", "username": "Bernadette.Bins49", "email": "Cleve.Kerluke52@yahoo.com", "address": { "street": "Christa Heights", "suite": 51569, "city": "La Crosse", "zipcode": "59218", "geo": { "lat": "-3.5126", "lng": "-111.4249" } }, "phone": "(461) 533-1950 x2066", "website": "sympathetic-palace.com", "company": { "name": "Carter - Mayert", "catchPhrase": "Team-oriented context-sensitive conglomeration", "bs": "matrix holistic supply-chains" } }, { "id": "5ec99f86-1146-49c2-8b23-6c5bdcae523a", "name": "Monroe Ortiz", "username": "Tanner70", "email": "Ricky.Bailey44@yahoo.com", "address": { "street": "Steuber Tunnel", "suite": 84746, "city": "North Jed", "zipcode": "93681-5405", "geo": { "lat": "9.0918", "lng": "64.5746" } }, "phone": "1-427-979-3113 x4557", "website": "zealous-fuel.info", "company": { "name": "Robel Inc", "catchPhrase": "Enhanced coherent internet solution", "bs": "revolutionize granular networks" } }, { "id": "bc8b4dd6-fd5c-4264-acdd-97700440cc21", "name": "Jerrold Botsford", "username": "Payton.McCullough", "email": "Kassandra_Gaylord@hotmail.com", "address": { "street": "Schuster Mountains", "suite": 50133, "city": "Roryfurt", "zipcode": "28775", "geo": { "lat": "-86.5277", "lng": "-83.6180" } }, "phone": "626.564.5008 x9065", "website": "tough-contingency.info", "company": { "name": "Lehner, Larson and Bradtke", "catchPhrase": "Extended user-facing projection", "bs": "cultivate next-generation e-commerce" } }, { "id": "76b01211-fa2f-4463-83a8-e04a7b36805e", "name": "Alf Sporer", "username": "Gretchen_Hane50", "email": "Parker.Ratke@hotmail.com", "address": { "street": "Caterina Summit", "suite": 90464, "city": "North Brennanview", "zipcode": "36734", "geo": { "lat": "81.5795", "lng": "-147.0114" } }, "phone": "430-774-8064", "website": "breakable-young.name", "company": { "name": "MacGyver Group", "catchPhrase": "Public-key 5th generation Graphical User Interface", "bs": "disintermediate magnetic e-business" } } ]
[ { "id": "95d4ed85-3603-41f0-8274-61e0ae1609b5", "name": "Sherwood Macejkovic", "username": "Murl39", "email": "Gabrielle69@yahoo.com", "address": { "street": "Daren Trail", "suite": 72773, "city": "West Sigmundbury", "zipcode": "06976-2823", "geo": { "lat": "-3.1493", "lng": "26.6207" } }, "phone": "1-357-867-9058 x381", "website": "frayed-consent.com", "company": { "name": "Frami Inc", "catchPhrase": "Synergistic actuating database", "bs": "extend compelling architectures" } } ]