Customisable dropdown select/multi-select component for react with custom render callback props to override inner components
SHELLnpm install --save react-dropdown-selectJSXimport 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": "3e7b5cc5-a25f-47ab-803f-2558fe8b9864",
"name": "London Braun",
"username": "Lenna81",
"email": "Nestor.Luettgen14@yahoo.com",
"address": {
"street": "O'Hara Ranch",
"suite": 32063,
"city": "Steuberville",
"zipcode": "75468-0746",
"geo": {
"lat": "42.6585",
"lng": "64.7464"
}
},
"phone": "278.316.5267 x5999",
"website": "experienced-reliability.biz",
"company": {
"name": "Turcotte, Crona and Mante",
"catchPhrase": "Front-line contextually-based forecast",
"bs": "integrate collaborative deliverables"
}
},
{
"id": "e91b9226-a5bc-4ba8-b241-77d452c11841",
"name": "Magdalen Weimann",
"username": "Jewel.Schneider",
"email": "Theresa_Glover@hotmail.com",
"address": {
"street": "O'Conner Springs",
"suite": 51590,
"city": "Bridgeport",
"zipcode": "50274",
"geo": {
"lat": "80.4977",
"lng": "64.6608"
}
},
"phone": "(898) 815-9251 x29700",
"website": "curvy-injustice.net",
"company": {
"name": "Mayert, Friesen and Haley",
"catchPhrase": "Multi-channelled grid-enabled encryption",
"bs": "streamline holistic communities"
}
},
{
"id": "e93a238b-37e8-4d4a-bc2c-4b04d0f50a3b",
"name": "Melissa Abernathy",
"username": "Earnest14",
"email": "Sterling_Sporer@yahoo.com",
"address": {
"street": "Lowe Motorway",
"suite": 50215,
"city": "Dareland",
"zipcode": "44345-2976",
"geo": {
"lat": "22.9854",
"lng": "179.3092"
}
},
"phone": "1-258-588-3082 x533",
"website": "past-subsidiary.com",
"company": {
"name": "Aufderhar - Hane",
"catchPhrase": "Organized human-resource complexity",
"bs": "evolve e-business synergies"
}
},
{
"id": "abcbd062-6f42-4f22-b1cb-6fe07181d517",
"name": "Angelita Russel",
"username": "Theodora9",
"email": "Garett.Orn@yahoo.com",
"address": {
"street": "Glenna Lane",
"suite": 83601,
"city": "North Myrna",
"zipcode": "16114",
"geo": {
"lat": "-77.8714",
"lng": "127.5383"
}
},
"phone": "482-512-4565",
"website": "barren-derby.com",
"company": {
"name": "Bosco and Sons",
"catchPhrase": "Reverse-engineered dynamic installation",
"bs": "syndicate customized communities"
}
},
{
"id": "9e8f3b9a-d6f4-4a39-b55d-89ca6f92a064",
"name": "Jordy Effertz",
"username": "Tanya_Breitenberg90",
"email": "Aliya19@hotmail.com",
"address": {
"street": "Jena Fork",
"suite": 26654,
"city": "Joplin",
"zipcode": "84792",
"geo": {
"lat": "43.0472",
"lng": "119.7758"
}
},
"phone": "(273) 632-2688",
"website": "jubilant-menorah.info",
"company": {
"name": "Cormier, Borer and Howell",
"catchPhrase": "Grass-roots reciprocal pricing structure",
"bs": "expedite open-source systems"
}
},
{
"id": "12a5fd1c-f17a-4f9c-8acc-4e2bf4475d93",
"name": "Marlin Gorczany",
"username": "Reese_Schimmel47",
"email": "Malvina.Mills42@gmail.com",
"address": {
"street": "Frami Rapid",
"suite": 18738,
"city": "Haylieburgh",
"zipcode": "86295-7869",
"geo": {
"lat": "22.1630",
"lng": "107.7091"
}
},
"phone": "(654) 708-7201 x2493",
"website": "yearly-unity.name",
"company": {
"name": "Cruickshank - Spinka",
"catchPhrase": "Monitored fault-tolerant support",
"bs": "revolutionize dot-com web services"
}
},
{
"id": "5e043fe2-b9b9-4216-92d2-27d8b7f8e1b0",
"name": "Mustafa Nicolas",
"username": "Benedict.Dach",
"email": "Marilou.Haag@gmail.com",
"address": {
"street": "Shayna Union",
"suite": 50167,
"city": "Lilliefurt",
"zipcode": "71614",
"geo": {
"lat": "-77.1105",
"lng": "42.8432"
}
},
"phone": "816-638-8956",
"website": "double-marksman.info",
"company": {
"name": "Luettgen - Jaskolski",
"catchPhrase": "Open-architected radical success",
"bs": "synergize turn-key interfaces"
}
},
{
"id": "bddb9022-421f-46f2-bcc9-24370a07cb3e",
"name": "Jacky White",
"username": "Leonel30",
"email": "Edison.Von7@yahoo.com",
"address": {
"street": "Mertz Island",
"suite": 72901,
"city": "West Americaborough",
"zipcode": "25711",
"geo": {
"lat": "12.3642",
"lng": "-133.5893"
}
},
"phone": "1-643-976-4622 x03856",
"website": "measly-borrowing.com",
"company": {
"name": "Wintheiser - Stracke",
"catchPhrase": "Expanded human-resource capability",
"bs": "brand scalable deliverables"
}
},
{
"id": "cb86a606-a9b7-4a96-afd9-e12f3d119479",
"name": "Easter Macejkovic",
"username": "Marilou.Walker4",
"email": "Alisha.Fadel81@hotmail.com",
"address": {
"street": "Jessika Brooks",
"suite": 248,
"city": "Schaefershire",
"zipcode": "78455-2269",
"geo": {
"lat": "-30.8834",
"lng": "-0.9144"
}
},
"phone": "544-810-1522",
"website": "aromatic-carabao.info",
"company": {
"name": "Sauer Inc",
"catchPhrase": "Advanced 24 hour interface",
"bs": "transition efficient supply-chains"
}
},
{
"id": "cef7d24f-f664-4457-aaad-2b7862eb78c2",
"name": "Hailey Murray",
"username": "Madelyn_Ernser",
"email": "Tomas62@yahoo.com",
"address": {
"street": "Fadel Station",
"suite": 79548,
"city": "Bellingham",
"zipcode": "92144",
"geo": {
"lat": "-14.3248",
"lng": "20.6645"
}
},
"phone": "522-825-7939 x394",
"website": "guilty-paste.biz",
"company": {
"name": "Cummerata - Carroll",
"catchPhrase": "Digitized 24 hour groupware",
"bs": "disintermediate end-to-end mindshare"
}
},
{
"id": "2c3d0a8b-1dd5-4334-9b76-beb4722ad42a",
"name": "Loren Botsford",
"username": "Irving_Ebert29",
"email": "Jettie15@hotmail.com",
"address": {
"street": "Daugherty Fall",
"suite": 55330,
"city": "Connchester",
"zipcode": "85193-6443",
"geo": {
"lat": "75.2969",
"lng": "-89.5156"
}
},
"phone": "(247) 524-3934",
"website": "vengeful-dryer.org",
"company": {
"name": "Rowe Group",
"catchPhrase": "De-engineered system-worthy contingency",
"bs": "productize e-business partnerships"
}
},
{
"id": "eb5daeee-d1ab-4688-9ba2-e78d8f6d2f9d",
"name": "Brigitte Lindgren",
"username": "Peyton.Labadie28",
"email": "Ulises_Fay40@yahoo.com",
"address": {
"street": "Mireille Summit",
"suite": 79927,
"city": "Fountainebleau",
"zipcode": "71265-1192",
"geo": {
"lat": "-54.1537",
"lng": "-44.2029"
}
},
"phone": "(960) 325-0728 x17417",
"website": "dark-chapter.biz",
"company": {
"name": "Murphy, Labadie and Connelly",
"catchPhrase": "Face to face global monitoring",
"bs": "embrace one-to-one niches"
}
},
{
"id": "897e400f-fe56-4ce1-bd66-1c5259daf137",
"name": "Laury Simonis",
"username": "Madisyn_Lemke70",
"email": "Will83@hotmail.com",
"address": {
"street": "Amparo Corners",
"suite": 51748,
"city": "New Rose",
"zipcode": "00864",
"geo": {
"lat": "15.3528",
"lng": "-112.0855"
}
},
"phone": "1-926-408-8836 x90723",
"website": "alienated-enactment.org",
"company": {
"name": "Kub - Moore",
"catchPhrase": "Synergistic user-facing approach",
"bs": "visualize rich blockchains"
}
},
{
"id": "247f9b02-fad6-4cd4-8378-90c34bb112ed",
"name": "Amina Weber",
"username": "Alessandro_Feil",
"email": "Layla15@hotmail.com",
"address": {
"street": "Beier Mountain",
"suite": 5488,
"city": "West Trevermouth",
"zipcode": "18053-0531",
"geo": {
"lat": "66.5630",
"lng": "-33.8322"
}
},
"phone": "322.710.9390 x8843",
"website": "excitable-babushka.com",
"company": {
"name": "Von - Murazik",
"catchPhrase": "Assimilated systemic process improvement",
"bs": "transform holistic portals"
}
},
{
"id": "28e17b7e-f3b6-4ccc-ac16-5daebefbf756",
"name": "Grover Feil",
"username": "Immanuel.Leannon42",
"email": "Roosevelt.Conn25@gmail.com",
"address": {
"street": "Mallie Parkways",
"suite": 99926,
"city": "Lake Janelleberg",
"zipcode": "39293",
"geo": {
"lat": "-5.9301",
"lng": "-113.2604"
}
},
"phone": "1-367-277-1060 x8032",
"website": "soulful-choker.info",
"company": {
"name": "Donnelly Inc",
"catchPhrase": "Persevering high-level help-desk",
"bs": "grow transparent vortals"
}
},
{
"id": "3c9eb1ec-691d-4501-a069-98662de56753",
"name": "Arnoldo Mayert",
"username": "Susie.Mayert15",
"email": "Kaycee.Nienow31@gmail.com",
"address": {
"street": "Porter Light",
"suite": 54571,
"city": "Angelport",
"zipcode": "67955",
"geo": {
"lat": "88.4047",
"lng": "150.3427"
}
},
"phone": "(459) 820-0015 x990",
"website": "hideous-cave.biz",
"company": {
"name": "Thiel - Breitenberg",
"catchPhrase": "Stand-alone well-modulated hierarchy",
"bs": "optimize granular e-services"
}
},
{
"id": "f03cf2a4-0181-41af-8964-b4c6e8f86d39",
"name": "Aidan Streich",
"username": "Adella_Schamberger",
"email": "Candice3@gmail.com",
"address": {
"street": "Lindgren Flat",
"suite": 28236,
"city": "Ankundingshire",
"zipcode": "01173",
"geo": {
"lat": "10.4549",
"lng": "-58.1702"
}
},
"phone": "469-885-1298 x10382",
"website": "aged-fledgling.info",
"company": {
"name": "Stracke, Ritchie and Macejkovic",
"catchPhrase": "Synchronised object-oriented alliance",
"bs": "implement sticky paradigms"
}
},
{
"id": "b8be2170-0ed3-4118-9e37-61045bc4ca7c",
"name": "Korbin Kertzmann",
"username": "Lew32",
"email": "Devonte_Schamberger14@yahoo.com",
"address": {
"street": "Garett Knolls",
"suite": 94906,
"city": "Sandy Springs",
"zipcode": "78913",
"geo": {
"lat": "62.5470",
"lng": "-92.3975"
}
},
"phone": "(783) 731-7022 x0401",
"website": "present-hate.biz",
"company": {
"name": "Toy - Pollich",
"catchPhrase": "Automated attitude-oriented moderator",
"bs": "integrate dot-com infrastructures"
}
},
{
"id": "9c0e7f52-52e3-4af3-8024-629d03819c1b",
"name": "Baylee Hane",
"username": "Margret_Mueller59",
"email": "Janelle27@gmail.com",
"address": {
"street": "Donnelly Groves",
"suite": 8074,
"city": "Elishabury",
"zipcode": "36221-6137",
"geo": {
"lat": "-61.7651",
"lng": "-44.5844"
}
},
"phone": "(925) 250-5177",
"website": "apprehensive-captor.biz",
"company": {
"name": "Sawayn - Goyette",
"catchPhrase": "Organic background help-desk",
"bs": "deploy ubiquitous bandwidth"
}
},
{
"id": "43adeee7-b82f-415d-a6c2-0d71ead61df1",
"name": "Rosendo Hoppe",
"username": "Landen_Larkin63",
"email": "Reggie.Conroy@hotmail.com",
"address": {
"street": "Patsy Expressway",
"suite": 86904,
"city": "Eltonmouth",
"zipcode": "50826",
"geo": {
"lat": "48.4931",
"lng": "78.5768"
}
},
"phone": "1-680-730-7995 x25820",
"website": "active-wastebasket.info",
"company": {
"name": "Auer, Hagenes and Heidenreich",
"catchPhrase": "Diverse attitude-oriented conglomeration",
"bs": "aggregate best-of-breed methodologies"
}
},
{
"id": "70d93d90-eae7-405e-aadc-184666e31916",
"name": "Simeon Jerde",
"username": "Marlen3",
"email": "Cleo.Kunze59@yahoo.com",
"address": {
"street": "Domingo Views",
"suite": 30565,
"city": "Carolinaborough",
"zipcode": "85571-3800",
"geo": {
"lat": "51.5332",
"lng": "59.2451"
}
},
"phone": "792.552.7382 x689",
"website": "grand-drake.com",
"company": {
"name": "Mertz, Zulauf and Lubowitz",
"catchPhrase": "Quality-focused methodical complexity",
"bs": "engineer interactive e-services"
}
},
{
"id": "0d9fa342-7eff-40d8-95bb-b2fe8ae5e83c",
"name": "Sydney Berge",
"username": "Rick.Wisoky17",
"email": "Heber.Feeney@yahoo.com",
"address": {
"street": "Constantin Islands",
"suite": 50664,
"city": "Haverhill",
"zipcode": "88634",
"geo": {
"lat": "49.4090",
"lng": "-149.0923"
}
},
"phone": "210.249.5598 x5682",
"website": "stark-thrush.net",
"company": {
"name": "Graham - Anderson",
"catchPhrase": "Sharable neutral Graphical User Interface",
"bs": "strategize efficient channels"
}
},
{
"id": "18d50ceb-435c-4199-95bd-795543febc40",
"name": "Ross Donnelly",
"username": "Nedra_West55",
"email": "Michale49@hotmail.com",
"address": {
"street": "Elfrieda Orchard",
"suite": 56236,
"city": "New Adalinemouth",
"zipcode": "78328",
"geo": {
"lat": "42.7481",
"lng": "65.6606"
}
},
"phone": "989-397-3082 x121",
"website": "baggy-facelift.net",
"company": {
"name": "Bashirian, Smith and Champlin",
"catchPhrase": "Extended global architecture",
"bs": "architect cutting-edge models"
}
},
{
"id": "ed1e73b2-23d3-4e7e-a5f1-3c11a47c0cd4",
"name": "Lambert Ziemann",
"username": "Winifred.Von",
"email": "Henry_McClure@yahoo.com",
"address": {
"street": "Schroeder Estate",
"suite": 53872,
"city": "Delltown",
"zipcode": "92324",
"geo": {
"lat": "-25.2521",
"lng": "68.1817"
}
},
"phone": "1-703-565-9818",
"website": "metallic-rainmaker.info",
"company": {
"name": "Nicolas - Runolfsdottir",
"catchPhrase": "Versatile high-level capacity",
"bs": "brand distributed applications"
}
},
{
"id": "c612919b-2ce0-4c85-a713-0f252603a6dc",
"name": "Evert Adams",
"username": "Lauren.Schmeler31",
"email": "Arne.Grant91@gmail.com",
"address": {
"street": "Greyson Row",
"suite": 52202,
"city": "Chesterfield",
"zipcode": "49351",
"geo": {
"lat": "32.1732",
"lng": "30.9720"
}
},
"phone": "714.446.1969 x357",
"website": "primary-pause.info",
"company": {
"name": "Kunde, Wolf and Weber",
"catchPhrase": "Multi-layered uniform methodology",
"bs": "exploit holistic deliverables"
}
},
{
"id": "cc1b8dcd-01f3-4d07-ad27-123fd0508dc3",
"name": "Rashad Rempel",
"username": "Freeda92",
"email": "Lizeth_Padberg0@yahoo.com",
"address": {
"street": "Larissa Isle",
"suite": 68219,
"city": "East Scarlett",
"zipcode": "12974-6202",
"geo": {
"lat": "-16.2442",
"lng": "-176.9477"
}
},
"phone": "995.556.4556 x016",
"website": "separate-scrap.name",
"company": {
"name": "Cormier LLC",
"catchPhrase": "Multi-tiered didactic leverage",
"bs": "redefine cutting-edge e-tailers"
}
},
{
"id": "b3d237c2-82bd-45ca-b10e-173bbb552604",
"name": "Amir Haag",
"username": "Diana_Dibbert",
"email": "Elissa.Doyle@gmail.com",
"address": {
"street": "Sunny Points",
"suite": 29894,
"city": "North Miami Beach",
"zipcode": "14966-9974",
"geo": {
"lat": "62.6406",
"lng": "-62.6062"
}
},
"phone": "1-439-822-7115",
"website": "wide-proximity.org",
"company": {
"name": "Hickle - Jacobs",
"catchPhrase": "Organic next generation installation",
"bs": "e-enable granular e-commerce"
}
},
{
"id": "f48bc061-a360-4b0c-bb40-402a87d38dab",
"name": "Ibrahim Ziemann",
"username": "Adell_Weimann",
"email": "Lysanne99@gmail.com",
"address": {
"street": "Lesly Inlet",
"suite": 2862,
"city": "Haltom City",
"zipcode": "82630-9175",
"geo": {
"lat": "32.2936",
"lng": "126.1580"
}
},
"phone": "(467) 220-5996 x563",
"website": "agreeable-gavel.biz",
"company": {
"name": "Runte and Sons",
"catchPhrase": "Front-line well-modulated forecast",
"bs": "whiteboard synergistic platforms"
}
},
{
"id": "955923fc-c655-46ea-9177-439f569f3c63",
"name": "Myra Waters",
"username": "Vaughn_Hickle33",
"email": "Leopold62@gmail.com",
"address": {
"street": "Halie Inlet",
"suite": 5072,
"city": "Bergnaummouth",
"zipcode": "58559-8627",
"geo": {
"lat": "32.3963",
"lng": "-83.0570"
}
},
"phone": "842-561-3844 x4091",
"website": "messy-wholesale.com",
"company": {
"name": "Gibson - Heller",
"catchPhrase": "Multi-layered web-enabled product",
"bs": "integrate sexy interfaces"
}
},
{
"id": "ca025883-6bea-497d-9cb3-0a00fe724433",
"name": "Arlene White",
"username": "Isai97",
"email": "William_Hoeger@yahoo.com",
"address": {
"street": "Jacobs Extension",
"suite": 8630,
"city": "Port Orvalstad",
"zipcode": "50453-8295",
"geo": {
"lat": "73.2930",
"lng": "-5.6050"
}
},
"phone": "1-831-353-8627 x4800",
"website": "true-clockwork.biz",
"company": {
"name": "White, Hyatt and Ondricka",
"catchPhrase": "Persevering intangible database",
"bs": "exploit value-added portals"
}
}
][
{
"id": "abcbd062-6f42-4f22-b1cb-6fe07181d517",
"name": "Angelita Russel",
"username": "Theodora9",
"email": "Garett.Orn@yahoo.com",
"address": {
"street": "Glenna Lane",
"suite": 83601,
"city": "North Myrna",
"zipcode": "16114",
"geo": {
"lat": "-77.8714",
"lng": "127.5383"
}
},
"phone": "482-512-4565",
"website": "barren-derby.com",
"company": {
"name": "Bosco and Sons",
"catchPhrase": "Reverse-engineered dynamic installation",
"bs": "syndicate customized communities"
}
}
]