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": "6ad50587-e5b6-4e48-bc80-561a8307bcdb",
"name": "Davon Brown",
"username": "Tiana_Satterfield44",
"email": "Bernie76@yahoo.com",
"address": {
"street": "Schuster Alley",
"suite": 66146,
"city": "Lavadaville",
"zipcode": "31043-6995",
"geo": {
"lat": "87.0385",
"lng": "-175.0754"
}
},
"phone": "620-343-8421",
"website": "unsteady-sound.info",
"company": {
"name": "Witting, Sipes and Emmerich",
"catchPhrase": "Fundamental mission-critical secured line",
"bs": "mesh bleeding-edge portals"
}
},
{
"id": "97e2cb9b-a257-4ee3-a669-a2733d2a130f",
"name": "Jimmy Hayes",
"username": "Lolita_Fahey27",
"email": "Coy_Connelly83@yahoo.com",
"address": {
"street": "Garett Street",
"suite": 45522,
"city": "Lake Geovany",
"zipcode": "77553",
"geo": {
"lat": "-39.5227",
"lng": "-73.1895"
}
},
"phone": "(323) 702-5636",
"website": "vain-vanadyl.info",
"company": {
"name": "Halvorson, Pagac and Effertz",
"catchPhrase": "Team-oriented attitude-oriented encoding",
"bs": "enhance leading-edge technologies"
}
},
{
"id": "151d4cd9-30be-49d0-a3eb-1193db3297a5",
"name": "Herman Dickinson",
"username": "Lane.Huels18",
"email": "Gunnar83@gmail.com",
"address": {
"street": "Ziemann Brooks",
"suite": 86170,
"city": "Garryport",
"zipcode": "95510",
"geo": {
"lat": "24.4699",
"lng": "164.3212"
}
},
"phone": "(677) 786-4892 x6528",
"website": "harmful-commission.org",
"company": {
"name": "Dooley, Schoen and Heidenreich",
"catchPhrase": "Synergized system-worthy portal",
"bs": "cultivate distributed platforms"
}
},
{
"id": "ba3eecde-7c62-41cd-b7c7-61fbd7e1ddfc",
"name": "Josie Weissnat",
"username": "Juliana_Hirthe",
"email": "Henderson.Hayes37@gmail.com",
"address": {
"street": "Volkman Via",
"suite": 12440,
"city": "Port Linnea",
"zipcode": "49795",
"geo": {
"lat": "-30.0078",
"lng": "93.6997"
}
},
"phone": "430-669-8539 x5833",
"website": "majestic-tract.info",
"company": {
"name": "Kutch Inc",
"catchPhrase": "Devolved directional function",
"bs": "expedite front-end platforms"
}
},
{
"id": "cf5d88e6-291d-46b8-a636-03178aeb54ff",
"name": "Enola Haag",
"username": "Zaria.Lesch",
"email": "Sydnie_Jerde41@gmail.com",
"address": {
"street": "Zoie Meadows",
"suite": 60178,
"city": "West Alaynaberg",
"zipcode": "63760",
"geo": {
"lat": "-55.3924",
"lng": "179.1196"
}
},
"phone": "1-600-368-4125",
"website": "fussy-virginal.org",
"company": {
"name": "Langworth Group",
"catchPhrase": "Balanced foreground infrastructure",
"bs": "visualize intuitive infrastructures"
}
},
{
"id": "aef65194-aadb-4353-a6fc-dd4c58467139",
"name": "Gabe Lesch",
"username": "Zena.Kozey30",
"email": "Rollin_Homenick38@hotmail.com",
"address": {
"street": "Ottis Gateway",
"suite": 69725,
"city": "Arlington",
"zipcode": "30470-0992",
"geo": {
"lat": "18.2964",
"lng": "136.9486"
}
},
"phone": "1-439-817-1031 x3555",
"website": "downright-clothes.name",
"company": {
"name": "Raynor Group",
"catchPhrase": "Ameliorated reciprocal approach",
"bs": "leverage distributed synergies"
}
},
{
"id": "c133754f-a9c1-483c-b5ad-6f2055a9b1bf",
"name": "Elenor Schamberger",
"username": "Jordane_Schaefer",
"email": "Berneice_Halvorson@yahoo.com",
"address": {
"street": "Baumbach Trace",
"suite": 63799,
"city": "Otismouth",
"zipcode": "16958-6298",
"geo": {
"lat": "-0.1517",
"lng": "131.0604"
}
},
"phone": "768-440-1644",
"website": "subtle-metronome.info",
"company": {
"name": "Jacobs - Blick",
"catchPhrase": "User-friendly fault-tolerant hierarchy",
"bs": "deliver plug-and-play technologies"
}
},
{
"id": "b7abba7f-8648-4ad2-b973-18fcafdea477",
"name": "Carter Nienow",
"username": "Baron.Connelly",
"email": "Consuelo_Hettinger@yahoo.com",
"address": {
"street": "Robel Lights",
"suite": 96939,
"city": "Christiansenberg",
"zipcode": "25652",
"geo": {
"lat": "53.9305",
"lng": "16.0567"
}
},
"phone": "304-720-7543",
"website": "crafty-chief.net",
"company": {
"name": "Wilderman LLC",
"catchPhrase": "Reverse-engineered actuating productivity",
"bs": "synergize back-end bandwidth"
}
},
{
"id": "aa549f96-e16d-42d7-aff7-6fbba4f25480",
"name": "Chaya Nolan",
"username": "Priscilla_Carter",
"email": "Alfreda9@gmail.com",
"address": {
"street": "Streich Inlet",
"suite": 19688,
"city": "West Ressie",
"zipcode": "78903",
"geo": {
"lat": "38.5355",
"lng": "-117.3259"
}
},
"phone": "1-319-916-1759",
"website": "cultured-sparrow.org",
"company": {
"name": "Harvey - Beahan",
"catchPhrase": "Multi-lateral analyzing Graphic Interface",
"bs": "incubate B2B functionalities"
}
},
{
"id": "75c22b92-d326-47ef-baf5-8dd86753126c",
"name": "Lauryn Parisian",
"username": "Toney1",
"email": "Lyric.Franecki@gmail.com",
"address": {
"street": "Caleb Canyon",
"suite": 91929,
"city": "Port Wainotown",
"zipcode": "89953-8848",
"geo": {
"lat": "-40.6512",
"lng": "-165.1375"
}
},
"phone": "492.678.1644",
"website": "hopeful-liver.net",
"company": {
"name": "Crooks - Schmitt",
"catchPhrase": "Seamless upward-trending support",
"bs": "streamline bleeding-edge e-services"
}
},
{
"id": "f6d3f574-edfd-4ff4-b54b-f06c84a1a931",
"name": "Karlee Heidenreich",
"username": "Harrison_Yundt28",
"email": "Aisha_Schmitt50@gmail.com",
"address": {
"street": "Aimee Harbor",
"suite": 56074,
"city": "Revere",
"zipcode": "40522",
"geo": {
"lat": "53.1136",
"lng": "61.3635"
}
},
"phone": "762-960-4951 x2123",
"website": "concrete-oleo.net",
"company": {
"name": "Barton, Ruecker and Kassulke",
"catchPhrase": "Open-architected web-enabled moderator",
"bs": "morph end-to-end eyeballs"
}
},
{
"id": "6e0eba45-960b-4c08-a894-9e7e4a18f11e",
"name": "Francisca Treutel",
"username": "Lawson_Kreiger14",
"email": "Angelina.Kerluke@yahoo.com",
"address": {
"street": "Avery Hill",
"suite": 37233,
"city": "Rafaelchester",
"zipcode": "79298",
"geo": {
"lat": "80.1569",
"lng": "-103.9108"
}
},
"phone": "535-932-5155 x3573",
"website": "frightened-film.org",
"company": {
"name": "Haley, Reichert and Howe",
"catchPhrase": "Self-enabling fresh-thinking ability",
"bs": "expedite global bandwidth"
}
},
{
"id": "bbfda8d3-fd76-42a1-b0de-88f91c05c3b7",
"name": "Glenna Buckridge",
"username": "Jarred_Fahey41",
"email": "Denis_McGlynn81@gmail.com",
"address": {
"street": "Elody Route",
"suite": 20093,
"city": "Boyershire",
"zipcode": "21143",
"geo": {
"lat": "17.5234",
"lng": "-46.6319"
}
},
"phone": "585-207-0618",
"website": "awesome-banker.net",
"company": {
"name": "Mertz and Sons",
"catchPhrase": "Cross-platform homogeneous conglomeration",
"bs": "brand seamless metrics"
}
},
{
"id": "9963f097-c01d-4337-b7a8-0ec5d1fbdacf",
"name": "Mckayla Schroeder",
"username": "Rosamond.Schuppe21",
"email": "Ebba69@gmail.com",
"address": {
"street": "Cicero Village",
"suite": 35798,
"city": "New Barneytown",
"zipcode": "32950",
"geo": {
"lat": "26.2739",
"lng": "-131.3688"
}
},
"phone": "506-556-2433",
"website": "fake-handball.org",
"company": {
"name": "Koepp Group",
"catchPhrase": "Devolved maximized model",
"bs": "strategize e-business models"
}
},
{
"id": "e6e08517-b702-4bbc-9bd3-ac0cf0d43287",
"name": "Elody Mante",
"username": "Octavia20",
"email": "Miguel13@hotmail.com",
"address": {
"street": "Hickle Ports",
"suite": 84161,
"city": "Williamsontown",
"zipcode": "84477-2859",
"geo": {
"lat": "-13.6862",
"lng": "114.4794"
}
},
"phone": "1-260-571-6015 x9930",
"website": "moist-newspaper.info",
"company": {
"name": "Ruecker, Baumbach and Breitenberg",
"catchPhrase": "Visionary contextually-based function",
"bs": "evolve end-to-end eyeballs"
}
},
{
"id": "91f55b1b-dd1e-4264-9b75-86ce8cc7c431",
"name": "Stan Parker",
"username": "Jacinto_Blick",
"email": "Olaf.Adams@gmail.com",
"address": {
"street": "Quigley Glens",
"suite": 13996,
"city": "North Josiane",
"zipcode": "48150",
"geo": {
"lat": "-87.7883",
"lng": "74.4585"
}
},
"phone": "687.699.2830",
"website": "powerful-index.net",
"company": {
"name": "Larson LLC",
"catchPhrase": "Vision-oriented bifurcated portal",
"bs": "optimize value-added infomediaries"
}
},
{
"id": "9b20a2e6-1aa7-45c5-a48c-0e8b8d980615",
"name": "Americo Schamberger",
"username": "Lavinia58",
"email": "Orville.Mraz90@yahoo.com",
"address": {
"street": "Karson Turnpike",
"suite": 5969,
"city": "Port Dianna",
"zipcode": "06009",
"geo": {
"lat": "-41.8252",
"lng": "66.0604"
}
},
"phone": "(227) 622-3333 x16723",
"website": "admired-pasta.com",
"company": {
"name": "Reichel, Fay and Yost",
"catchPhrase": "Proactive mission-critical open system",
"bs": "engineer front-end metrics"
}
},
{
"id": "93dd7540-41b6-4d61-b9db-0cab98c7d7d4",
"name": "Charlie Doyle",
"username": "Maxine2",
"email": "Pierce_Wolff@yahoo.com",
"address": {
"street": "Brendon Road",
"suite": 72771,
"city": "Labadiefort",
"zipcode": "72739-7281",
"geo": {
"lat": "79.7435",
"lng": "-54.9867"
}
},
"phone": "(764) 769-7276 x0306",
"website": "uniform-spelling.com",
"company": {
"name": "Senger, Wisozk and Kulas",
"catchPhrase": "Implemented stable hardware",
"bs": "envisioneer value-added e-markets"
}
},
{
"id": "66cea21e-6b0b-4e54-8b4a-f25314ae6078",
"name": "Caesar Wyman",
"username": "Issac.Thompson77",
"email": "Josie_Cassin@gmail.com",
"address": {
"street": "Greyson Skyway",
"suite": 61480,
"city": "West Shanelle",
"zipcode": "01038",
"geo": {
"lat": "40.2902",
"lng": "-150.3477"
}
},
"phone": "(907) 915-1521 x943",
"website": "pushy-flame.net",
"company": {
"name": "Glover, Jacobi and Braun",
"catchPhrase": "Progressive composite instruction set",
"bs": "repurpose distributed initiatives"
}
},
{
"id": "27eea8fc-4882-4968-9c9a-88c024532b2e",
"name": "Russ Jaskolski",
"username": "Leanna.Gottlieb27",
"email": "Leonora.Dooley79@yahoo.com",
"address": {
"street": "Cole Lodge",
"suite": 30083,
"city": "Littlechester",
"zipcode": "19578",
"geo": {
"lat": "-63.0250",
"lng": "-50.4828"
}
},
"phone": "735.516.3377 x550",
"website": "villainous-artery.org",
"company": {
"name": "Rodriguez - Bayer",
"catchPhrase": "Multi-tiered hybrid functionalities",
"bs": "engineer transparent blockchains"
}
},
{
"id": "42772624-55df-4393-a4a9-4795ab9a6d77",
"name": "Earnestine Jacobson",
"username": "Josiah.Brown",
"email": "Eloy_Sauer96@yahoo.com",
"address": {
"street": "Leannon Parkway",
"suite": 40068,
"city": "North Kyra",
"zipcode": "57869",
"geo": {
"lat": "27.0407",
"lng": "140.5902"
}
},
"phone": "495.412.6576 x4118",
"website": "clumsy-evaporation.name",
"company": {
"name": "Ernser - Hyatt",
"catchPhrase": "Cross-group mobile system engine",
"bs": "transform B2C models"
}
},
{
"id": "771f4643-21ce-4177-b5df-adbf8a52ef4c",
"name": "Darion Schulist",
"username": "Miller.Simonis61",
"email": "Mossie13@gmail.com",
"address": {
"street": "Heidenreich Point",
"suite": 69090,
"city": "Keegantown",
"zipcode": "38160",
"geo": {
"lat": "-44.7945",
"lng": "-72.6186"
}
},
"phone": "(204) 697-6482 x786",
"website": "grateful-elimination.org",
"company": {
"name": "Davis - Okuneva",
"catchPhrase": "Team-oriented intangible secured line",
"bs": "morph magnetic solutions"
}
},
{
"id": "f832e697-3a83-4de0-8637-93aafb095266",
"name": "Leatha Boehm",
"username": "Avery.Reichert10",
"email": "Sincere37@yahoo.com",
"address": {
"street": "Lilliana Curve",
"suite": 21201,
"city": "El Dorado Hills",
"zipcode": "72648-5763",
"geo": {
"lat": "86.9196",
"lng": "19.7659"
}
},
"phone": "1-998-815-0452",
"website": "cultivated-savior.com",
"company": {
"name": "Harvey - Goldner",
"catchPhrase": "Diverse fault-tolerant toolset",
"bs": "matrix interactive vortals"
}
},
{
"id": "72518d41-0077-4906-aaa5-0bf7f10ce063",
"name": "Damien Prohaska",
"username": "Brennon.Ratke",
"email": "Gianni_Hahn@hotmail.com",
"address": {
"street": "Carter Locks",
"suite": 87340,
"city": "Kellieshire",
"zipcode": "24582",
"geo": {
"lat": "26.6296",
"lng": "-67.5575"
}
},
"phone": "538.339.0795",
"website": "whimsical-buffer.org",
"company": {
"name": "Wyman - Sipes",
"catchPhrase": "Sharable exuding data-warehouse",
"bs": "syndicate viral infrastructures"
}
},
{
"id": "4f999f89-656f-48ec-98ed-b5849770fbf3",
"name": "Norma Grady",
"username": "Irwin.Murphy",
"email": "Alexander_Abshire38@yahoo.com",
"address": {
"street": "Reynolds Circle",
"suite": 79688,
"city": "Lewstad",
"zipcode": "32698-7119",
"geo": {
"lat": "62.7408",
"lng": "9.9801"
}
},
"phone": "(558) 329-9890",
"website": "massive-beginning.name",
"company": {
"name": "Stamm LLC",
"catchPhrase": "Up-sized impactful conglomeration",
"bs": "synergize value-added interfaces"
}
},
{
"id": "2cfe2fe1-b214-430a-b8a2-7442a2bdb182",
"name": "John Hagenes",
"username": "Jewell.Mayer22",
"email": "Justus90@hotmail.com",
"address": {
"street": "Pfeffer Estates",
"suite": 42550,
"city": "South Kaden",
"zipcode": "77143",
"geo": {
"lat": "57.9273",
"lng": "20.2563"
}
},
"phone": "402-485-5034 x626",
"website": "parched-guilty.com",
"company": {
"name": "Botsford - Reichert",
"catchPhrase": "Quality-focused intermediate secured line",
"bs": "strategize customized deliverables"
}
},
{
"id": "f335e990-0a4f-4290-b597-fe29d1e72820",
"name": "Sage Kuhic",
"username": "Keegan.Krajcik50",
"email": "Elinore.Upton@yahoo.com",
"address": {
"street": "Kelsie Unions",
"suite": 36822,
"city": "Marksfort",
"zipcode": "89521",
"geo": {
"lat": "10.5910",
"lng": "140.0963"
}
},
"phone": "272.298.6503",
"website": "striking-formation.com",
"company": {
"name": "Ritchie, Feil and Shields",
"catchPhrase": "Monitored radical time-frame",
"bs": "morph 24/7 models"
}
},
{
"id": "6b9df2a1-49da-419b-a403-3514cc49a442",
"name": "Elta Roberts",
"username": "Aurelio.Shields",
"email": "Kadin.Dickens@hotmail.com",
"address": {
"street": "Skiles Fort",
"suite": 25686,
"city": "Aurora",
"zipcode": "24717-1664",
"geo": {
"lat": "24.7610",
"lng": "98.7308"
}
},
"phone": "964-993-7167 x98532",
"website": "well-groomed-deduction.biz",
"company": {
"name": "Kunze LLC",
"catchPhrase": "Optimized zero defect model",
"bs": "seize integrated experiences"
}
},
{
"id": "9af9972d-6ca1-4129-8401-01fe0814d2a5",
"name": "Lelia Stokes",
"username": "Philip52",
"email": "Laurie_Larkin@yahoo.com",
"address": {
"street": "Noemi Extension",
"suite": 36126,
"city": "Stratford",
"zipcode": "14742-6949",
"geo": {
"lat": "-61.0387",
"lng": "73.3114"
}
},
"phone": "(924) 744-5573",
"website": "upright-inglenook.com",
"company": {
"name": "O'Connell LLC",
"catchPhrase": "Automated stable groupware",
"bs": "architect extensible architectures"
}
},
{
"id": "7f046dd6-cbc1-44bd-a72d-63f751c52d74",
"name": "Raphaelle Grimes",
"username": "Braeden_Herzog",
"email": "Ellie_Stehr@yahoo.com",
"address": {
"street": "Ankunding Groves",
"suite": 32151,
"city": "North Dominique",
"zipcode": "06007",
"geo": {
"lat": "-32.8025",
"lng": "-47.9220"
}
},
"phone": "(921) 966-7439 x86173",
"website": "neighboring-nickname.com",
"company": {
"name": "Wisozk, Keebler and Rowe",
"catchPhrase": "Down-sized human-resource process improvement",
"bs": "exploit dot-com synergies"
}
}
][
{
"id": "ba3eecde-7c62-41cd-b7c7-61fbd7e1ddfc",
"name": "Josie Weissnat",
"username": "Juliana_Hirthe",
"email": "Henderson.Hayes37@gmail.com",
"address": {
"street": "Volkman Via",
"suite": 12440,
"city": "Port Linnea",
"zipcode": "49795",
"geo": {
"lat": "-30.0078",
"lng": "93.6997"
}
},
"phone": "430-669-8539 x5833",
"website": "majestic-tract.info",
"company": {
"name": "Kutch Inc",
"catchPhrase": "Devolved directional function",
"bs": "expedite front-end platforms"
}
}
]