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": "b316333e-aa76-440a-9b07-75ae6006b5a8",
"name": "Lazaro Metz",
"username": "Robb_Schinner",
"email": "Garth_Schimmel13@hotmail.com",
"address": {
"street": "Kaelyn Pine",
"suite": 56532,
"city": "Lake Barton",
"zipcode": "67249",
"geo": {
"lat": "9.9182",
"lng": "-6.3343"
}
},
"phone": "1-376-546-5311 x114",
"website": "idiotic-silence.org",
"company": {
"name": "Kulas - Kulas",
"catchPhrase": "Mandatory asynchronous archive",
"bs": "facilitate extensible deliverables"
}
},
{
"id": "3a350a34-79bf-446a-8ead-17c0234cc561",
"name": "Toby Hoeger",
"username": "Ines_Gerlach",
"email": "Daren46@gmail.com",
"address": {
"street": "Zaria Spurs",
"suite": 23788,
"city": "Glenview",
"zipcode": "95930-8023",
"geo": {
"lat": "-0.3936",
"lng": "38.3587"
}
},
"phone": "927.636.5268 x33361",
"website": "frosty-whirlwind.org",
"company": {
"name": "Rutherford Inc",
"catchPhrase": "Upgradable clear-thinking moratorium",
"bs": "extend magnetic initiatives"
}
},
{
"id": "f907b7c6-8bbd-4a33-a51a-2251a7d663b4",
"name": "Florencio Carroll",
"username": "Ramiro37",
"email": "Helene.Nicolas@yahoo.com",
"address": {
"street": "Dulce Trafficway",
"suite": 51781,
"city": "Phyllisfurt",
"zipcode": "85074",
"geo": {
"lat": "-53.3391",
"lng": "-115.3791"
}
},
"phone": "976-898-5938 x88460",
"website": "puny-omission.name",
"company": {
"name": "Welch and Sons",
"catchPhrase": "Synergistic zero defect open system",
"bs": "monetize B2C action-items"
}
},
{
"id": "5c0971e1-5578-432e-a99c-4bc228280244",
"name": "Gunnar Jones",
"username": "Maiya_Waters23",
"email": "Theodore_Schmeler36@hotmail.com",
"address": {
"street": "Keshaun Spurs",
"suite": 17914,
"city": "New Leann",
"zipcode": "31865-9806",
"geo": {
"lat": "54.0053",
"lng": "120.4986"
}
},
"phone": "202-984-4780 x58960",
"website": "agile-wreck.com",
"company": {
"name": "Ward, Reichert and Kunze",
"catchPhrase": "Sharable upward-trending info-mediaries",
"bs": "embrace cross-media e-services"
}
},
{
"id": "e2590f81-a052-41d7-9a61-c70b4dda9d9d",
"name": "Irma Runolfsdottir",
"username": "Kevin.Huels",
"email": "Yasmin57@gmail.com",
"address": {
"street": "Giovani Motorway",
"suite": 21303,
"city": "Calistamouth",
"zipcode": "12290",
"geo": {
"lat": "68.7057",
"lng": "176.6485"
}
},
"phone": "640.571.9154",
"website": "glum-sunday.org",
"company": {
"name": "Ankunding - Lebsack",
"catchPhrase": "Ergonomic global firmware",
"bs": "reinvent compelling partnerships"
}
},
{
"id": "bd147135-c292-4568-86e6-4b138a0e0e1d",
"name": "Susana Bartell",
"username": "Dana68",
"email": "Llewellyn19@hotmail.com",
"address": {
"street": "Winnifred Dale",
"suite": 90363,
"city": "Maximusberg",
"zipcode": "94621-4144",
"geo": {
"lat": "67.3853",
"lng": "36.2572"
}
},
"phone": "351-471-7214 x9440",
"website": "unsightly-chord.name",
"company": {
"name": "D'Amore - Ritchie",
"catchPhrase": "Programmable tertiary parallelism",
"bs": "recontextualize dot-com mindshare"
}
},
{
"id": "ad35fbbd-3d39-4af4-abeb-49e112aaf3b8",
"name": "Raleigh Conroy",
"username": "Francisca_Mann45",
"email": "Sheridan37@yahoo.com",
"address": {
"street": "Bergstrom Junctions",
"suite": 28398,
"city": "West Wandaborough",
"zipcode": "69618-8365",
"geo": {
"lat": "-78.1606",
"lng": "-143.9621"
}
},
"phone": "279.926.4191",
"website": "vast-obligation.info",
"company": {
"name": "Hegmann LLC",
"catchPhrase": "Horizontal background knowledge base",
"bs": "cultivate one-to-one relationships"
}
},
{
"id": "c646abd4-89f2-420d-bc3b-e240064fac9d",
"name": "Ebba Parker",
"username": "Jocelyn_Nitzsche",
"email": "Keenan.Casper9@hotmail.com",
"address": {
"street": "Mable Neck",
"suite": 51087,
"city": "Torpfort",
"zipcode": "12531-1953",
"geo": {
"lat": "-66.2437",
"lng": "72.7531"
}
},
"phone": "747.622.2815 x72462",
"website": "mad-dart.org",
"company": {
"name": "Schuppe Inc",
"catchPhrase": "Object-based encompassing throughput",
"bs": "optimize value-added e-business"
}
},
{
"id": "9e441dd4-6a1f-43db-8c5d-1e28e72d53b3",
"name": "Conrad Reynolds",
"username": "Noelia49",
"email": "Francis76@yahoo.com",
"address": {
"street": "Karianne Key",
"suite": 37975,
"city": "Andreannemouth",
"zipcode": "49500",
"geo": {
"lat": "29.4223",
"lng": "-96.6463"
}
},
"phone": "1-784-431-7594",
"website": "angry-postage.biz",
"company": {
"name": "Harvey, Bahringer and Nitzsche",
"catchPhrase": "Horizontal clear-thinking circuit",
"bs": "matrix scalable interfaces"
}
},
{
"id": "f60cd2cc-f4dd-45df-bb4b-48a63028997f",
"name": "Madilyn Armstrong",
"username": "Seth_Flatley5",
"email": "Angus.Marvin45@hotmail.com",
"address": {
"street": "Ritchie Squares",
"suite": 10836,
"city": "Ovatown",
"zipcode": "31803",
"geo": {
"lat": "-67.0250",
"lng": "130.0232"
}
},
"phone": "493.822.6301",
"website": "naughty-outcome.com",
"company": {
"name": "Effertz - Heathcote",
"catchPhrase": "Networked background firmware",
"bs": "scale sexy infrastructures"
}
},
{
"id": "cb5e49eb-fe59-464d-9e43-70e8e31d28e2",
"name": "Adrien Langworth",
"username": "Johnson_Kemmer",
"email": "Marion.Bradtke95@yahoo.com",
"address": {
"street": "Tito Brook",
"suite": 25055,
"city": "North Johnny",
"zipcode": "58666",
"geo": {
"lat": "51.0161",
"lng": "145.6646"
}
},
"phone": "963-649-1476 x7424",
"website": "well-informed-athlete.info",
"company": {
"name": "O'Kon - Botsford",
"catchPhrase": "Centralized bottom-line intranet",
"bs": "utilize open-source models"
}
},
{
"id": "a0b857b0-8761-473b-854d-c5dd53410b3f",
"name": "Christelle Nicolas",
"username": "Anahi_Flatley25",
"email": "Gage18@gmail.com",
"address": {
"street": "Ritchie Island",
"suite": 45612,
"city": "Port Giles",
"zipcode": "25677-8901",
"geo": {
"lat": "54.6155",
"lng": "118.3553"
}
},
"phone": "602-789-9577",
"website": "studious-happening.com",
"company": {
"name": "Blick LLC",
"catchPhrase": "Quality-focused intermediate info-mediaries",
"bs": "redefine killer e-markets"
}
},
{
"id": "da2e1c0c-017e-48e1-85b7-46cc43f27edb",
"name": "Jaleel Bruen",
"username": "Jeremie.Hintz",
"email": "Ignatius_Mayert48@yahoo.com",
"address": {
"street": "Wilson Stream",
"suite": 56860,
"city": "Zariaport",
"zipcode": "54519-4308",
"geo": {
"lat": "-47.5666",
"lng": "122.6160"
}
},
"phone": "1-794-296-4169 x3343",
"website": "shabby-border.biz",
"company": {
"name": "Grady, Herzog and Schuster",
"catchPhrase": "Synergistic mobile application",
"bs": "synergize vertical paradigms"
}
},
{
"id": "fc4744e3-7720-4fb1-98fc-e4178cd72b79",
"name": "Joanne Upton",
"username": "Soledad_Heidenreich",
"email": "Yvonne_Buckridge29@gmail.com",
"address": {
"street": "Connelly Turnpike",
"suite": 10236,
"city": "Ryleightown",
"zipcode": "71087",
"geo": {
"lat": "-40.5232",
"lng": "-17.6981"
}
},
"phone": "947-442-4787",
"website": "every-destroyer.info",
"company": {
"name": "Donnelly - Dibbert",
"catchPhrase": "Public-key client-server implementation",
"bs": "optimize magnetic initiatives"
}
},
{
"id": "948d83f7-c059-4024-aa1c-91806f2ef18c",
"name": "Rowena Huels",
"username": "Laila36",
"email": "Emmet_Grady99@yahoo.com",
"address": {
"street": "Conn Orchard",
"suite": 90420,
"city": "South Luciousfurt",
"zipcode": "91376",
"geo": {
"lat": "11.6694",
"lng": "-83.2326"
}
},
"phone": "(834) 858-4719 x78756",
"website": "exotic-snowmobiling.org",
"company": {
"name": "Lind, Anderson and Fritsch",
"catchPhrase": "Extended incremental leverage",
"bs": "envisioneer leading-edge technologies"
}
},
{
"id": "ed12c6f6-ed5d-4020-8b87-5815f6416959",
"name": "Mabel DuBuque",
"username": "Maribel_Rempel",
"email": "Karlee_Ward@yahoo.com",
"address": {
"street": "Franey Squares",
"suite": 52615,
"city": "North Abbyview",
"zipcode": "89905-3281",
"geo": {
"lat": "-46.3315",
"lng": "-12.2868"
}
},
"phone": "290.906.1573 x765",
"website": "unwelcome-vinegar.net",
"company": {
"name": "Treutel Group",
"catchPhrase": "Pre-emptive 4th generation knowledge user",
"bs": "exploit B2B markets"
}
},
{
"id": "15bb5c4a-d844-4351-bc00-eb1574c7606a",
"name": "Victoria Muller",
"username": "Everardo.Ferry2",
"email": "Bridie_Gleichner@yahoo.com",
"address": {
"street": "O'Reilly Route",
"suite": 91005,
"city": "Bradenton",
"zipcode": "60553",
"geo": {
"lat": "-67.5989",
"lng": "169.2733"
}
},
"phone": "1-244-626-4081 x4113",
"website": "failing-dinosaur.org",
"company": {
"name": "Altenwerth Inc",
"catchPhrase": "Multi-channelled even-keeled standardization",
"bs": "scale impactful markets"
}
},
{
"id": "0e56bf90-3d60-4a3d-8492-6fcf33a58512",
"name": "Meta Mills",
"username": "Steve.Harber",
"email": "Elsie.Moore25@gmail.com",
"address": {
"street": "Tiffany Groves",
"suite": 99489,
"city": "Jalonshire",
"zipcode": "25094",
"geo": {
"lat": "77.8698",
"lng": "144.5719"
}
},
"phone": "1-998-730-2317",
"website": "tan-cutting.net",
"company": {
"name": "Frami - Thompson",
"catchPhrase": "Diverse high-level standardization",
"bs": "whiteboard collaborative e-tailers"
}
},
{
"id": "a53b9c89-e0d0-430b-b445-d57e16064c01",
"name": "Michelle Greenholt",
"username": "Terence.Sporer",
"email": "Makayla_Adams58@yahoo.com",
"address": {
"street": "Ledner Harbors",
"suite": 64815,
"city": "Dubuque",
"zipcode": "56819",
"geo": {
"lat": "-59.1413",
"lng": "-88.6333"
}
},
"phone": "1-551-304-9928",
"website": "exemplary-profession.org",
"company": {
"name": "Mraz, Huels and Funk",
"catchPhrase": "Synergistic bottom-line challenge",
"bs": "transform rich web-readiness"
}
},
{
"id": "c95cd482-e681-4f5d-8886-6e0fc7b9b753",
"name": "Merritt Homenick",
"username": "Ludie15",
"email": "Trystan47@yahoo.com",
"address": {
"street": "Jermaine Ranch",
"suite": 65244,
"city": "Phoenix",
"zipcode": "03262-8871",
"geo": {
"lat": "-41.0829",
"lng": "75.2867"
}
},
"phone": "(649) 898-1011",
"website": "aggravating-fetus.name",
"company": {
"name": "Runte - Swaniawski",
"catchPhrase": "Self-enabling maximized contingency",
"bs": "transition B2B e-business"
}
},
{
"id": "d137a41e-85f3-472a-9f9f-d59c780d1917",
"name": "Jody Aufderhar",
"username": "Christy.Deckow7",
"email": "Markus.Kunze@hotmail.com",
"address": {
"street": "Ernesto Forks",
"suite": 15340,
"city": "Zemlakstad",
"zipcode": "52719-9782",
"geo": {
"lat": "-31.8463",
"lng": "36.1546"
}
},
"phone": "911.550.1109 x68444",
"website": "dismal-hearing.com",
"company": {
"name": "Klein - Kilback",
"catchPhrase": "Grass-roots exuding leverage",
"bs": "monetize front-end initiatives"
}
},
{
"id": "817af066-4ca4-4723-9a21-c5fd17322658",
"name": "Uriah Romaguera",
"username": "Isabella.Feeney57",
"email": "Kamryn69@yahoo.com",
"address": {
"street": "Jaylan Creek",
"suite": 16607,
"city": "Lynchmouth",
"zipcode": "64154",
"geo": {
"lat": "-38.1911",
"lng": "59.9239"
}
},
"phone": "950.946.6976 x943",
"website": "overdue-play.net",
"company": {
"name": "VonRueden Group",
"catchPhrase": "Cross-platform optimizing throughput",
"bs": "generate efficient models"
}
},
{
"id": "d9fbb259-6490-47e2-8b32-75a6fa2985bc",
"name": "Carolanne Johns",
"username": "Dillon.Kirlin71",
"email": "Kaylah87@yahoo.com",
"address": {
"street": "Weimann Extension",
"suite": 40615,
"city": "Ephraimtown",
"zipcode": "65362",
"geo": {
"lat": "81.2443",
"lng": "-109.9893"
}
},
"phone": "799-939-9095",
"website": "awful-posterior.net",
"company": {
"name": "King, Boyle and Champlin",
"catchPhrase": "Organic coherent support",
"bs": "seize strategic paradigms"
}
},
{
"id": "7444e070-72ba-42fe-84c0-7ab900bf5d61",
"name": "Calista Vandervort",
"username": "Rene99",
"email": "Nicklaus.Altenwerth@yahoo.com",
"address": {
"street": "Goyette Well",
"suite": 51180,
"city": "Herzogland",
"zipcode": "20610",
"geo": {
"lat": "22.6286",
"lng": "-111.3982"
}
},
"phone": "442-952-3356",
"website": "perfumed-magazine.name",
"company": {
"name": "Wilderman, Bins and Walsh",
"catchPhrase": "Switchable 24/7 middleware",
"bs": "leverage holistic metrics"
}
},
{
"id": "81786078-acfd-4a22-9a09-3fb35652c9f2",
"name": "Genoveva Morissette",
"username": "Cortez46",
"email": "Eldora.Kautzer@gmail.com",
"address": {
"street": "Duane Underpass",
"suite": 83117,
"city": "Thousand Oaks",
"zipcode": "77740-7569",
"geo": {
"lat": "48.7998",
"lng": "-136.2064"
}
},
"phone": "(775) 518-8780 x5866",
"website": "healthy-overcharge.com",
"company": {
"name": "Jacobson Group",
"catchPhrase": "Assimilated maximized monitoring",
"bs": "leverage viral relationships"
}
},
{
"id": "1cbc1acf-7ef1-4d45-9e5b-fb3e3b51b201",
"name": "Jayden Considine",
"username": "Lucy.Smitham",
"email": "Brown_Doyle@hotmail.com",
"address": {
"street": "Paucek Rapids",
"suite": 30100,
"city": "Aurora",
"zipcode": "91608-0943",
"geo": {
"lat": "-31.4934",
"lng": "78.3119"
}
},
"phone": "526.615.9031 x6859",
"website": "nippy-appeal.biz",
"company": {
"name": "Jacobson, Daugherty and Bernhard",
"catchPhrase": "Phased attitude-oriented moratorium",
"bs": "disintermediate compelling supply-chains"
}
},
{
"id": "bf76b23f-1ade-4a59-aba1-90fc723fac27",
"name": "Nikki Crona",
"username": "Edythe.Ward",
"email": "Korbin91@yahoo.com",
"address": {
"street": "Brisa Orchard",
"suite": 483,
"city": "Larkinborough",
"zipcode": "80154-6677",
"geo": {
"lat": "34.9512",
"lng": "166.5951"
}
},
"phone": "284.388.6790 x76587",
"website": "angry-grandmother.org",
"company": {
"name": "Gleichner - Herzog",
"catchPhrase": "Up-sized multi-tasking analyzer",
"bs": "synergize enterprise blockchains"
}
},
{
"id": "3e672751-8c43-418b-9224-efe59e928013",
"name": "Lauriane Reynolds",
"username": "Aurelia44",
"email": "Madilyn.Ruecker5@gmail.com",
"address": {
"street": "Ron Fort",
"suite": 84405,
"city": "Pierreshire",
"zipcode": "40927-2163",
"geo": {
"lat": "-5.3168",
"lng": "-106.6962"
}
},
"phone": "212-651-1845",
"website": "tidy-crap.com",
"company": {
"name": "Rohan LLC",
"catchPhrase": "Triple-buffered well-modulated interface",
"bs": "harness plug-and-play paradigms"
}
},
{
"id": "2b9baed3-9195-4af3-ac8e-e0470377eb45",
"name": "Faustino Turcotte",
"username": "Dolly_Nikolaus74",
"email": "Jamil_Parker@hotmail.com",
"address": {
"street": "Ziemann River",
"suite": 76345,
"city": "St. Peters",
"zipcode": "40703",
"geo": {
"lat": "-85.6231",
"lng": "-145.1738"
}
},
"phone": "806.491.4146 x5045",
"website": "first-schnitzel.net",
"company": {
"name": "Glover, Fadel and Emard",
"catchPhrase": "Streamlined reciprocal hierarchy",
"bs": "e-enable visionary infrastructures"
}
},
{
"id": "b90f4405-7594-426b-817e-fe1450e0bff6",
"name": "Quincy Ruecker",
"username": "Rebeca.Goyette",
"email": "Claudia.Koss43@gmail.com",
"address": {
"street": "Hiram Stream",
"suite": 55814,
"city": "Lake Lottiemouth",
"zipcode": "69786",
"geo": {
"lat": "57.3090",
"lng": "81.2151"
}
},
"phone": "906.726.0733 x6671",
"website": "grown-patio.org",
"company": {
"name": "Blanda, Shields and Beer",
"catchPhrase": "Proactive didactic capacity",
"bs": "extend visionary mindshare"
}
}
][
{
"id": "5c0971e1-5578-432e-a99c-4bc228280244",
"name": "Gunnar Jones",
"username": "Maiya_Waters23",
"email": "Theodore_Schmeler36@hotmail.com",
"address": {
"street": "Keshaun Spurs",
"suite": 17914,
"city": "New Leann",
"zipcode": "31865-9806",
"geo": {
"lat": "54.0053",
"lng": "120.4986"
}
},
"phone": "202-984-4780 x58960",
"website": "agile-wreck.com",
"company": {
"name": "Ward, Reichert and Kunze",
"catchPhrase": "Sharable upward-trending info-mediaries",
"bs": "embrace cross-media e-services"
}
}
]