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": "74d75876-309c-497c-8e80-1e0b09e3eeed",
"name": "Zackery Wolff",
"username": "Green_Ward",
"email": "Chet29@gmail.com",
"address": {
"street": "Mazie Gateway",
"suite": 85563,
"city": "North Florencioport",
"zipcode": "25341-9788",
"geo": {
"lat": "46.2087",
"lng": "135.6066"
}
},
"phone": "451-429-1895 x16645",
"website": "tremendous-yarmulke.info",
"company": {
"name": "Morissette and Sons",
"catchPhrase": "Horizontal intermediate circuit",
"bs": "repurpose intuitive e-services"
}
},
{
"id": "9d3d4e4d-45d4-4acb-84a9-6809951bab2a",
"name": "Cleve Moore",
"username": "Jay_Dach32",
"email": "Mark_Ledner81@gmail.com",
"address": {
"street": "Walker Rapid",
"suite": 38513,
"city": "Beaverton",
"zipcode": "14427",
"geo": {
"lat": "-1.5702",
"lng": "-28.2691"
}
},
"phone": "673.371.8739 x48128",
"website": "worrisome-specialist.com",
"company": {
"name": "Auer - Beier",
"catchPhrase": "Triple-buffered high-level encoding",
"bs": "transform bleeding-edge schemas"
}
},
{
"id": "1dfa771c-d53a-4847-a04c-1c5c68ea6d22",
"name": "Tyra Kutch",
"username": "Laurence_McLaughlin",
"email": "Eino.Mohr@gmail.com",
"address": {
"street": "Crona Spur",
"suite": 43583,
"city": "New Simfurt",
"zipcode": "40534",
"geo": {
"lat": "-33.0889",
"lng": "-64.6895"
}
},
"phone": "575.646.0290 x192",
"website": "skinny-pass.info",
"company": {
"name": "Mraz and Sons",
"catchPhrase": "Phased explicit encryption",
"bs": "aggregate B2C web services"
}
},
{
"id": "0c25805a-5d75-4bca-8d7b-48d584669502",
"name": "Yasmeen Wilderman",
"username": "Baby.Corwin",
"email": "Karl.Predovic28@gmail.com",
"address": {
"street": "Sporer Radial",
"suite": 50362,
"city": "Ryannmouth",
"zipcode": "68166-9026",
"geo": {
"lat": "-59.3337",
"lng": "136.9110"
}
},
"phone": "575.301.1313",
"website": "yawning-grandson.net",
"company": {
"name": "Block LLC",
"catchPhrase": "Enhanced interactive knowledge user",
"bs": "revolutionize vertical web services"
}
},
{
"id": "87e48556-0dce-411a-af3d-30317f9d3f97",
"name": "Nedra Ondricka",
"username": "Audie10",
"email": "Adolph_Hudson95@gmail.com",
"address": {
"street": "Trey Stream",
"suite": 37570,
"city": "Port Bennytown",
"zipcode": "04704-6581",
"geo": {
"lat": "-0.2691",
"lng": "-153.4275"
}
},
"phone": "708-452-8203 x4086",
"website": "frightened-runner.com",
"company": {
"name": "Lowe, Reilly and Abshire",
"catchPhrase": "Organized bifurcated throughput",
"bs": "incentivize B2C applications"
}
},
{
"id": "d15d6fa8-9fc4-4126-b329-55643a5d0067",
"name": "Sherwood Huels",
"username": "Floy.Ondricka",
"email": "Ivah60@hotmail.com",
"address": {
"street": "Rippin Inlet",
"suite": 94257,
"city": "East Mortimer",
"zipcode": "26398-6369",
"geo": {
"lat": "43.1354",
"lng": "112.8505"
}
},
"phone": "257-569-2603 x6424",
"website": "uniform-justification.net",
"company": {
"name": "Becker, Bergstrom and Schoen",
"catchPhrase": "Realigned content-based parallelism",
"bs": "facilitate sexy initiatives"
}
},
{
"id": "82dab4ab-27e9-4b3b-a1f5-eb2b6608b1a8",
"name": "Hank Lind",
"username": "Earlene53",
"email": "Arvel.Cummerata98@gmail.com",
"address": {
"street": "Judy Isle",
"suite": 81008,
"city": "South Isabell",
"zipcode": "57629-7745",
"geo": {
"lat": "64.1351",
"lng": "-158.3096"
}
},
"phone": "649.630.7926",
"website": "closed-chick.net",
"company": {
"name": "Gibson Inc",
"catchPhrase": "De-engineered responsive portal",
"bs": "cultivate strategic niches"
}
},
{
"id": "8aec0a20-93f6-4b61-ba17-59129083ac92",
"name": "Lera Kirlin",
"username": "Charlie4",
"email": "Aurelia.Rowe@gmail.com",
"address": {
"street": "Schultz Center",
"suite": 95564,
"city": "Pierreland",
"zipcode": "68040",
"geo": {
"lat": "-72.1904",
"lng": "-38.5458"
}
},
"phone": "(982) 649-3795",
"website": "thick-tankful.info",
"company": {
"name": "Brown - Boehm",
"catchPhrase": "Down-sized disintermediate task-force",
"bs": "streamline best-of-breed bandwidth"
}
},
{
"id": "721235eb-05be-4ee9-b37b-0089dd94d030",
"name": "Dave Parisian",
"username": "Marie62",
"email": "Effie.Jacobs@gmail.com",
"address": {
"street": "Eugene Light",
"suite": 78151,
"city": "Edmond",
"zipcode": "40583-0108",
"geo": {
"lat": "85.0501",
"lng": "106.4269"
}
},
"phone": "1-508-923-1763",
"website": "optimal-gap.biz",
"company": {
"name": "Heidenreich, Turner and Osinski",
"catchPhrase": "Innovative national matrices",
"bs": "engineer leading-edge solutions"
}
},
{
"id": "1f334a96-e64f-4e0a-b4e0-3df6af82f6db",
"name": "Michelle Bernhard",
"username": "Deontae_Lang7",
"email": "Rylan.Kirlin13@yahoo.com",
"address": {
"street": "Alberto Bypass",
"suite": 21832,
"city": "Serenastad",
"zipcode": "59471",
"geo": {
"lat": "-69.7130",
"lng": "-123.7366"
}
},
"phone": "840.959.2038 x06183",
"website": "everlasting-total.info",
"company": {
"name": "Wiegand, Langosh and Schroeder",
"catchPhrase": "Optimized foreground capacity",
"bs": "generate end-to-end networks"
}
},
{
"id": "95394556-e3cd-479f-86eb-206341b68181",
"name": "Wendell Witting",
"username": "Vincenzo.Stoltenberg96",
"email": "Mozell78@yahoo.com",
"address": {
"street": "Rath Plaza",
"suite": 64786,
"city": "Mooretown",
"zipcode": "76222",
"geo": {
"lat": "-74.5126",
"lng": "169.2801"
}
},
"phone": "(932) 491-6120 x449",
"website": "petty-symbol.org",
"company": {
"name": "Dooley Inc",
"catchPhrase": "Customizable 4th generation knowledge user",
"bs": "syndicate interactive web-readiness"
}
},
{
"id": "a7662099-054b-4143-a658-c67d9551c602",
"name": "Raina Kuvalis",
"username": "Ansley_Kiehn51",
"email": "Name.Hand1@yahoo.com",
"address": {
"street": "Hickle Union",
"suite": 39243,
"city": "Townehaven",
"zipcode": "55833-9191",
"geo": {
"lat": "-89.8446",
"lng": "92.7642"
}
},
"phone": "423.600.9779 x06958",
"website": "playful-architecture.info",
"company": {
"name": "McCullough LLC",
"catchPhrase": "Multi-layered content-based synergy",
"bs": "recontextualize e-business systems"
}
},
{
"id": "87f583d2-8771-4a4b-ae44-368e64b08f7e",
"name": "Larue Labadie",
"username": "Raleigh_Bernier30",
"email": "Alverta_Emmerich@gmail.com",
"address": {
"street": "Barton Pines",
"suite": 6615,
"city": "Port Jessika",
"zipcode": "27128-3354",
"geo": {
"lat": "-25.7238",
"lng": "-175.4992"
}
},
"phone": "1-687-773-0672",
"website": "dreary-spectrum.com",
"company": {
"name": "Romaguera, Mills and Pfeffer",
"catchPhrase": "Streamlined composite interface",
"bs": "deploy revolutionary models"
}
},
{
"id": "5562f774-b39e-42ac-a145-4b598cd7cac6",
"name": "Elyse Klein",
"username": "Carlee.Senger6",
"email": "Rosalind94@yahoo.com",
"address": {
"street": "Myrtis Plaza",
"suite": 62890,
"city": "Devonteburgh",
"zipcode": "49804-2058",
"geo": {
"lat": "88.5610",
"lng": "-12.2567"
}
},
"phone": "1-457-216-7509",
"website": "shimmering-cantaloupe.name",
"company": {
"name": "Kutch and Sons",
"catchPhrase": "Customer-focused bi-directional system engine",
"bs": "empower customized niches"
}
},
{
"id": "feaf9e45-0ab7-4bb1-8e6d-d7eac5bdfcec",
"name": "Zachary Buckridge",
"username": "Elta.McCullough45",
"email": "Felicia_Nolan4@gmail.com",
"address": {
"street": "Doyle Gardens",
"suite": 70444,
"city": "Sunnybury",
"zipcode": "34121",
"geo": {
"lat": "87.7450",
"lng": "25.9475"
}
},
"phone": "1-338-772-3614 x82314",
"website": "scared-typewriter.org",
"company": {
"name": "VonRueden, Strosin and Terry",
"catchPhrase": "Seamless dynamic monitoring",
"bs": "grow sexy web services"
}
},
{
"id": "a29ec093-44ee-4e5a-9dd2-701aa2ea3c93",
"name": "Guy Swaniawski",
"username": "Max.Roberts",
"email": "Kyler.Hills@yahoo.com",
"address": {
"street": "McDermott Station",
"suite": 58581,
"city": "Jovaniville",
"zipcode": "72902",
"geo": {
"lat": "37.9017",
"lng": "-140.4293"
}
},
"phone": "1-302-635-9397 x932",
"website": "itchy-terrace.biz",
"company": {
"name": "Howell - Murray",
"catchPhrase": "Assimilated user-facing workforce",
"bs": "aggregate compelling systems"
}
},
{
"id": "b2404a0c-16ba-46ff-bbe9-f50ee4314a48",
"name": "Dustin Satterfield",
"username": "Davin91",
"email": "Carley50@hotmail.com",
"address": {
"street": "Marquardt Stravenue",
"suite": 39194,
"city": "East Jazminfort",
"zipcode": "58476",
"geo": {
"lat": "-29.9829",
"lng": "-101.9053"
}
},
"phone": "796-305-9820 x91551",
"website": "excited-recall.info",
"company": {
"name": "Hintz - Fahey",
"catchPhrase": "Total web-enabled contingency",
"bs": "innovate innovative mindshare"
}
},
{
"id": "20eca7e7-d307-4c5e-a0a2-e072df5d6b49",
"name": "Katelyn Bashirian",
"username": "Lawrence.Pagac",
"email": "Toni_VonRueden34@gmail.com",
"address": {
"street": "Frieda Shore",
"suite": 22195,
"city": "West Fannyside",
"zipcode": "20187",
"geo": {
"lat": "-3.9805",
"lng": "-10.4496"
}
},
"phone": "990-929-1929 x4702",
"website": "normal-sneaker.biz",
"company": {
"name": "Marks LLC",
"catchPhrase": "Optimized bi-directional circuit",
"bs": "transition wireless applications"
}
},
{
"id": "777381e2-5692-4ebd-a391-600e46955c17",
"name": "Angelina Von",
"username": "Orlo.Heidenreich",
"email": "Gardner.King@gmail.com",
"address": {
"street": "Lueilwitz Forks",
"suite": 11743,
"city": "Pomona",
"zipcode": "65949-8709",
"geo": {
"lat": "-61.1133",
"lng": "-57.4228"
}
},
"phone": "(250) 345-1651",
"website": "adventurous-executor.biz",
"company": {
"name": "Koss - Deckow",
"catchPhrase": "Virtual neutral instruction set",
"bs": "syndicate B2B channels"
}
},
{
"id": "9d273db1-dcd2-4a4c-afaa-6c3d03cc9462",
"name": "Broderick Mitchell",
"username": "Erna_Shanahan43",
"email": "Constantin.Lebsack22@yahoo.com",
"address": {
"street": "Bernier Centers",
"suite": 20906,
"city": "New Felix",
"zipcode": "27498-9358",
"geo": {
"lat": "-80.6085",
"lng": "102.9357"
}
},
"phone": "(567) 226-0546 x268",
"website": "overlooked-samurai.net",
"company": {
"name": "McKenzie - Balistreri",
"catchPhrase": "Customizable radical portal",
"bs": "redefine sticky action-items"
}
},
{
"id": "9f1b5687-4c9f-4cc5-9f5d-ecb1e51ef744",
"name": "Gladys Haley",
"username": "Juanita_Cole",
"email": "Kelton43@yahoo.com",
"address": {
"street": "Darren Valley",
"suite": 9132,
"city": "North Mathewport",
"zipcode": "86619-3465",
"geo": {
"lat": "-68.3861",
"lng": "128.2672"
}
},
"phone": "817-425-8199 x53809",
"website": "broken-advertising.name",
"company": {
"name": "Wolff - Weissnat",
"catchPhrase": "Virtual local toolset",
"bs": "iterate killer methodologies"
}
},
{
"id": "d7715aba-6682-46a2-a041-eb252934dcde",
"name": "Annabel Zulauf",
"username": "Jaiden_Lehner",
"email": "Emerson.Koss65@yahoo.com",
"address": {
"street": "Ebert Street",
"suite": 14213,
"city": "Port Alfonzostad",
"zipcode": "60671",
"geo": {
"lat": "42.7089",
"lng": "-122.3067"
}
},
"phone": "1-986-249-0837 x44231",
"website": "poor-condominium.name",
"company": {
"name": "Heller - Wunsch",
"catchPhrase": "Centralized attitude-oriented flexibility",
"bs": "streamline e-business vortals"
}
},
{
"id": "14547fda-8b49-42e9-b21a-9a6aa14f38e1",
"name": "Trent Quitzon",
"username": "Teagan83",
"email": "Krystina_Bergnaum34@gmail.com",
"address": {
"street": "Wilderman Plain",
"suite": 99371,
"city": "Wittingmouth",
"zipcode": "68560",
"geo": {
"lat": "76.8351",
"lng": "-4.1127"
}
},
"phone": "863.536.1846 x45879",
"website": "complete-country.info",
"company": {
"name": "Berge - Pollich",
"catchPhrase": "Self-enabling empowering approach",
"bs": "repurpose wireless mindshare"
}
},
{
"id": "d849049e-77ed-4214-becc-21d66e20ceec",
"name": "Kody Wunsch",
"username": "Caterina_Leffler",
"email": "Viva_Schinner20@yahoo.com",
"address": {
"street": "Frami Land",
"suite": 81532,
"city": "Hacienda Heights",
"zipcode": "76182-9511",
"geo": {
"lat": "-83.1571",
"lng": "-93.2456"
}
},
"phone": "593-695-1154",
"website": "brilliant-occasion.name",
"company": {
"name": "Nicolas, Franecki and MacGyver",
"catchPhrase": "Universal intermediate adapter",
"bs": "target proactive ROI"
}
},
{
"id": "dac24c76-0ef4-463a-8c7b-5749bf21ff65",
"name": "Lafayette Torp",
"username": "Dovie_Fay",
"email": "Rosalinda.Hessel68@hotmail.com",
"address": {
"street": "Lavina Villages",
"suite": 86222,
"city": "Kevenstad",
"zipcode": "23095-5353",
"geo": {
"lat": "-2.3467",
"lng": "-129.0168"
}
},
"phone": "789.474.1194",
"website": "jubilant-account.biz",
"company": {
"name": "Rempel - Rowe",
"catchPhrase": "Team-oriented dynamic info-mediaries",
"bs": "matrix out-of-the-box vortals"
}
},
{
"id": "eba57a5f-a45e-47ec-9d35-3bd734e1effd",
"name": "Cleveland Feest",
"username": "Jamal.Bins",
"email": "Margret70@yahoo.com",
"address": {
"street": "Emelia Drive",
"suite": 77195,
"city": "Amyachester",
"zipcode": "87812-7961",
"geo": {
"lat": "83.8714",
"lng": "110.0795"
}
},
"phone": "483-821-3375 x51412",
"website": "even-dose.info",
"company": {
"name": "Rau LLC",
"catchPhrase": "Exclusive leading edge solution",
"bs": "enhance interactive supply-chains"
}
},
{
"id": "2f8efa11-8e7a-47b9-8692-9c84f37510d4",
"name": "Kari Effertz",
"username": "Vena47",
"email": "Modesta21@yahoo.com",
"address": {
"street": "Hunter Causeway",
"suite": 64859,
"city": "Hassanmouth",
"zipcode": "22820-2784",
"geo": {
"lat": "-84.8573",
"lng": "-94.9642"
}
},
"phone": "649-442-8668 x914",
"website": "menacing-alpenglow.org",
"company": {
"name": "Powlowski LLC",
"catchPhrase": "Open-architected needs-based infrastructure",
"bs": "unleash integrated e-services"
}
},
{
"id": "4c972857-58be-4187-98bb-97acf157b537",
"name": "Werner Walker",
"username": "Monty.Howe",
"email": "Daren_Fisher@gmail.com",
"address": {
"street": "Nader Summit",
"suite": 90400,
"city": "Lake Tracyburgh",
"zipcode": "99129-4283",
"geo": {
"lat": "-32.2296",
"lng": "-30.6970"
}
},
"phone": "846.872.2143 x55269",
"website": "new-printer.info",
"company": {
"name": "Hills, Kozey and Lubowitz",
"catchPhrase": "Expanded methodical budgetary management",
"bs": "morph holistic e-services"
}
},
{
"id": "6654d5cc-3b25-462c-8425-5720ea55879f",
"name": "Robin Carroll",
"username": "Verlie_Botsford",
"email": "Nedra_Gerhold25@yahoo.com",
"address": {
"street": "Kling Neck",
"suite": 5173,
"city": "York",
"zipcode": "28739-4493",
"geo": {
"lat": "-59.4308",
"lng": "-2.4758"
}
},
"phone": "(640) 838-8881",
"website": "sociable-courtroom.biz",
"company": {
"name": "Tremblay - Collier",
"catchPhrase": "Function-based intangible frame",
"bs": "optimize value-added infrastructures"
}
},
{
"id": "4ad3beb7-ffec-4678-a2ee-7a70f83989bb",
"name": "Emmalee Mueller",
"username": "Maegan91",
"email": "Otis_Farrell74@hotmail.com",
"address": {
"street": "Bernhard Forest",
"suite": 48390,
"city": "Vivianeberg",
"zipcode": "56100-0278",
"geo": {
"lat": "-49.9621",
"lng": "118.6029"
}
},
"phone": "(683) 417-8216",
"website": "healthy-jeweller.name",
"company": {
"name": "Hermiston, Goyette and Rice",
"catchPhrase": "Self-enabling mobile moderator",
"bs": "reintermediate mission-critical portals"
}
}
][
{
"id": "0c25805a-5d75-4bca-8d7b-48d584669502",
"name": "Yasmeen Wilderman",
"username": "Baby.Corwin",
"email": "Karl.Predovic28@gmail.com",
"address": {
"street": "Sporer Radial",
"suite": 50362,
"city": "Ryannmouth",
"zipcode": "68166-9026",
"geo": {
"lat": "-59.3337",
"lng": "136.9110"
}
},
"phone": "575.301.1313",
"website": "yawning-grandson.net",
"company": {
"name": "Block LLC",
"catchPhrase": "Enhanced interactive knowledge user",
"bs": "revolutionize vertical web services"
}
}
]