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": "d9cfcb80-1000-4be4-9bf7-0c24b6d3d388",
"name": "Jarrod Rohan",
"username": "Esmeralda25",
"email": "Guido20@yahoo.com",
"address": {
"street": "Rau Oval",
"suite": 80992,
"city": "East Guadalupe",
"zipcode": "05137",
"geo": {
"lat": "-46.3734",
"lng": "43.3663"
}
},
"phone": "480-366-0468 x31901",
"website": "original-glove.net",
"company": {
"name": "Ledner - Gusikowski",
"catchPhrase": "Enhanced attitude-oriented Graphical User Interface",
"bs": "drive B2B experiences"
}
},
{
"id": "d9dd4e64-01c2-4be1-afa5-4802a5d60afc",
"name": "Judge Bahringer",
"username": "Arno_Goldner",
"email": "Arjun2@yahoo.com",
"address": {
"street": "Lang Trail",
"suite": 11240,
"city": "Bethesda",
"zipcode": "79037",
"geo": {
"lat": "9.5313",
"lng": "58.0875"
}
},
"phone": "(990) 760-0240 x05737",
"website": "warlike-headphones.org",
"company": {
"name": "Schiller, Rath and Cruickshank",
"catchPhrase": "Upgradable background framework",
"bs": "leverage customized vortals"
}
},
{
"id": "b5bda483-8a7a-4a24-a072-889900a7bed0",
"name": "Kaylah Mayert",
"username": "Hugh.Frami3",
"email": "Flavie.Mueller96@hotmail.com",
"address": {
"street": "Tessie Extensions",
"suite": 97799,
"city": "South Cruzfurt",
"zipcode": "28478",
"geo": {
"lat": "30.4673",
"lng": "36.0828"
}
},
"phone": "700.496.6006",
"website": "extraneous-sourwood.org",
"company": {
"name": "Rippin, Bednar and Langworth",
"catchPhrase": "Object-based human-resource model",
"bs": "envisioneer enterprise applications"
}
},
{
"id": "7d6dc116-f4e7-46ab-9853-4746cf0d352b",
"name": "Coralie Kub",
"username": "Christine49",
"email": "Geovanni.Hessel36@hotmail.com",
"address": {
"street": "Jalon Spurs",
"suite": 98239,
"city": "Edwardburgh",
"zipcode": "22214-1786",
"geo": {
"lat": "-78.8521",
"lng": "12.7472"
}
},
"phone": "1-379-386-7239 x3743",
"website": "fragrant-trim.name",
"company": {
"name": "Bailey, Dach and Douglas",
"catchPhrase": "Reduced national secured line",
"bs": "utilize enterprise models"
}
},
{
"id": "c4a7c0f0-353e-4a97-86e6-3600af6eff2a",
"name": "Cleo Howell",
"username": "Katrine89",
"email": "Christiana32@gmail.com",
"address": {
"street": "Keebler Center",
"suite": 94475,
"city": "Port Emiliano",
"zipcode": "41617-9672",
"geo": {
"lat": "-56.4528",
"lng": "102.8466"
}
},
"phone": "860-577-0890 x435",
"website": "legitimate-platelet.com",
"company": {
"name": "Koepp - Waelchi",
"catchPhrase": "Down-sized client-server framework",
"bs": "target scalable infomediaries"
}
},
{
"id": "52575891-dea9-43db-ae37-6d0321bdfc12",
"name": "Hank Funk",
"username": "Oscar_Lockman",
"email": "Aida54@gmail.com",
"address": {
"street": "Macejkovic Ranch",
"suite": 54625,
"city": "Nicolasland",
"zipcode": "60614-1975",
"geo": {
"lat": "-7.3113",
"lng": "-9.3483"
}
},
"phone": "(771) 229-6796 x353",
"website": "loyal-legend.name",
"company": {
"name": "Rowe, Ratke and Abbott",
"catchPhrase": "Realigned regional artificial intelligence",
"bs": "enable turn-key infomediaries"
}
},
{
"id": "793afff0-4915-49eb-a20d-867f483ec679",
"name": "Elta Barrows",
"username": "Christiana27",
"email": "Magnolia57@gmail.com",
"address": {
"street": "Becker Lights",
"suite": 11779,
"city": "Rempelshire",
"zipcode": "74149-4195",
"geo": {
"lat": "26.2063",
"lng": "-97.6742"
}
},
"phone": "335.546.3396 x1846",
"website": "waterlogged-architecture.name",
"company": {
"name": "Kovacek Inc",
"catchPhrase": "Stand-alone eco-centric intranet",
"bs": "leverage real-time e-services"
}
},
{
"id": "641b346b-2aad-4b1c-b479-26df26fa84f5",
"name": "Nicklaus Christiansen",
"username": "Julia.Heaney",
"email": "Deanna.Price95@hotmail.com",
"address": {
"street": "Willms Burg",
"suite": 70077,
"city": "East Dominic",
"zipcode": "40384",
"geo": {
"lat": "-56.3584",
"lng": "-140.2072"
}
},
"phone": "(547) 509-4794 x319",
"website": "next-bowler.org",
"company": {
"name": "Gerhold and Sons",
"catchPhrase": "Multi-layered regional superstructure",
"bs": "revolutionize bleeding-edge supply-chains"
}
},
{
"id": "280c8fc0-ac1d-4c78-b78c-7cde499eb9c1",
"name": "Myrtie Kassulke",
"username": "Cleveland76",
"email": "Genesis_Waelchi@hotmail.com",
"address": {
"street": "Ledner Mews",
"suite": 65846,
"city": "Lake Bulahton",
"zipcode": "56116",
"geo": {
"lat": "-73.6737",
"lng": "-163.2157"
}
},
"phone": "1-494-694-3027",
"website": "lumbering-analogue.biz",
"company": {
"name": "Bogan - Grady",
"catchPhrase": "User-centric maximized archive",
"bs": "grow vertical relationships"
}
},
{
"id": "f0fff7de-f505-43d2-9d8b-cfc0ddfee631",
"name": "Clementine Jerde",
"username": "August16",
"email": "Hans.Kutch72@gmail.com",
"address": {
"street": "Delphia Ridges",
"suite": 10098,
"city": "South Forrest",
"zipcode": "19461",
"geo": {
"lat": "5.3540",
"lng": "68.7511"
}
},
"phone": "1-416-721-7058 x3518",
"website": "spotted-scout.com",
"company": {
"name": "Grady, Gleason and Lang",
"catchPhrase": "Polarised local artificial intelligence",
"bs": "deploy one-to-one e-services"
}
},
{
"id": "dbce192a-31c8-4e11-8feb-de45879aa391",
"name": "Arlie Kiehn",
"username": "Ophelia.Bayer",
"email": "Doris91@yahoo.com",
"address": {
"street": "Daugherty Ville",
"suite": 18542,
"city": "Port Rosalindaville",
"zipcode": "77065-5461",
"geo": {
"lat": "86.1434",
"lng": "-0.7569"
}
},
"phone": "1-225-858-4473 x3810",
"website": "adorable-dipstick.org",
"company": {
"name": "Sanford - Funk",
"catchPhrase": "Networked multimedia knowledge base",
"bs": "harness virtual e-markets"
}
},
{
"id": "d200741e-5e9b-4221-a75d-839fc1f6b888",
"name": "Deanna Beier",
"username": "Sofia84",
"email": "Elise.Ernser@yahoo.com",
"address": {
"street": "Reanna Gateway",
"suite": 93306,
"city": "Amandaton",
"zipcode": "37518",
"geo": {
"lat": "61.0101",
"lng": "62.3203"
}
},
"phone": "(784) 376-7186",
"website": "ideal-player.net",
"company": {
"name": "Rutherford, Funk and Wiza",
"catchPhrase": "Synergized intangible success",
"bs": "exploit end-to-end e-markets"
}
},
{
"id": "6f6c7333-315d-4529-b1ea-1a2936439ed1",
"name": "Shea Pacocha",
"username": "Dereck69",
"email": "Ashlynn70@hotmail.com",
"address": {
"street": "Odell Way",
"suite": 44333,
"city": "Justonport",
"zipcode": "16729-8085",
"geo": {
"lat": "-24.9984",
"lng": "-119.7937"
}
},
"phone": "(466) 953-0788 x749",
"website": "careful-affair.name",
"company": {
"name": "Rempel Group",
"catchPhrase": "Sharable stable methodology",
"bs": "incubate front-end content"
}
},
{
"id": "122631f0-84be-4b57-9398-c1d1ed7a5431",
"name": "Leilani Streich",
"username": "Brandt_Miller30",
"email": "Briana_Kertzmann@gmail.com",
"address": {
"street": "Willms Streets",
"suite": 66971,
"city": "Florin",
"zipcode": "47188",
"geo": {
"lat": "6.3757",
"lng": "-59.6397"
}
},
"phone": "886-406-7059",
"website": "cute-subsidiary.biz",
"company": {
"name": "Koelpin LLC",
"catchPhrase": "Fully-configurable global process improvement",
"bs": "unleash out-of-the-box users"
}
},
{
"id": "2f0dda10-f9ab-4150-bbe4-2ec265332410",
"name": "Manley Abbott",
"username": "Greta.Will10",
"email": "Elyssa.Mosciski@hotmail.com",
"address": {
"street": "Margarette Meadows",
"suite": 50874,
"city": "West Jerod",
"zipcode": "95150",
"geo": {
"lat": "44.5031",
"lng": "-59.9961"
}
},
"phone": "975-764-9118 x335",
"website": "spotless-twine.com",
"company": {
"name": "Trantow - Pagac",
"catchPhrase": "Reactive cohesive collaboration",
"bs": "transition virtual web services"
}
},
{
"id": "fdcf39ae-e1dc-48f6-9b1f-01188eb96dbe",
"name": "Mercedes Bernhard",
"username": "Caitlyn.Osinski",
"email": "Chandler_Bins99@yahoo.com",
"address": {
"street": "Quinton Manors",
"suite": 34842,
"city": "North Cordell",
"zipcode": "86957-9060",
"geo": {
"lat": "-81.1152",
"lng": "-78.2605"
}
},
"phone": "(720) 778-5706 x52026",
"website": "humble-couch.name",
"company": {
"name": "Leannon LLC",
"catchPhrase": "Polarised coherent info-mediaries",
"bs": "synthesize 24/365 metrics"
}
},
{
"id": "fb700b40-c777-4483-a9c6-b5314acc2218",
"name": "Nash Lockman",
"username": "Darren.Reichert",
"email": "Armani.Runolfsdottir42@gmail.com",
"address": {
"street": "Crist Plaza",
"suite": 38363,
"city": "Port Felipaberg",
"zipcode": "66499-0358",
"geo": {
"lat": "64.3290",
"lng": "-104.3396"
}
},
"phone": "959-937-7198 x56511",
"website": "gentle-western.name",
"company": {
"name": "Hegmann, Feest and Schultz",
"catchPhrase": "Team-oriented attitude-oriented migration",
"bs": "aggregate 24/365 interfaces"
}
},
{
"id": "ae2fbddc-53b6-4efd-b848-12a2b0bc476e",
"name": "Tamara Rutherford",
"username": "Alana_Botsford68",
"email": "Karen.Harris@gmail.com",
"address": {
"street": "Ziemann Gateway",
"suite": 99920,
"city": "Wisozkfurt",
"zipcode": "91425",
"geo": {
"lat": "-55.0257",
"lng": "132.6432"
}
},
"phone": "687-688-9775 x163",
"website": "pleasant-territory.biz",
"company": {
"name": "Vandervort Inc",
"catchPhrase": "Object-based zero tolerance installation",
"bs": "morph seamless convergence"
}
},
{
"id": "2c7eeebc-df4b-4547-a868-8b4c0ff42030",
"name": "Raina Ritchie",
"username": "Caleigh_Abshire34",
"email": "Pauline.Pfannerstill@hotmail.com",
"address": {
"street": "Dare Wall",
"suite": 19416,
"city": "Homenickbury",
"zipcode": "10634-8177",
"geo": {
"lat": "37.8677",
"lng": "-148.8018"
}
},
"phone": "1-325-875-9443 x41285",
"website": "fantastic-bibliography.info",
"company": {
"name": "Funk, Donnelly and Turcotte",
"catchPhrase": "Fully-configurable user-facing parallelism",
"bs": "recontextualize compelling e-services"
}
},
{
"id": "35ed6172-5e82-4017-9a31-d77647f94e2f",
"name": "Brooks Gerhold",
"username": "Tierra_Walter70",
"email": "Ernesto19@yahoo.com",
"address": {
"street": "Turcotte Road",
"suite": 55642,
"city": "Sheboygan",
"zipcode": "21742-0790",
"geo": {
"lat": "-49.8413",
"lng": "-154.0326"
}
},
"phone": "(678) 763-4160",
"website": "fragrant-samovar.biz",
"company": {
"name": "Wolf - Stokes",
"catchPhrase": "Programmable asymmetric pricing structure",
"bs": "drive innovative metrics"
}
},
{
"id": "b6d2e5f0-171e-4928-ad0e-76f3005ef012",
"name": "Rubie Olson",
"username": "Monty_Howell74",
"email": "Lois.Swift@gmail.com",
"address": {
"street": "Lockman Trace",
"suite": 61445,
"city": "East Lonnie",
"zipcode": "03409",
"geo": {
"lat": "29.4797",
"lng": "-145.6166"
}
},
"phone": "1-964-671-6292 x81098",
"website": "vacant-voter.com",
"company": {
"name": "Torp, Bruen and Schumm",
"catchPhrase": "Streamlined client-server help-desk",
"bs": "envisioneer efficient technologies"
}
},
{
"id": "31f80752-3894-42a4-9fdf-131f11fa4cfd",
"name": "Lloyd Larkin",
"username": "Sammy22",
"email": "Arno.Hackett@yahoo.com",
"address": {
"street": "Bode Plain",
"suite": 67437,
"city": "West Jovani",
"zipcode": "27581",
"geo": {
"lat": "-11.3214",
"lng": "178.6283"
}
},
"phone": "922-255-5947 x14396",
"website": "crazy-laughter.net",
"company": {
"name": "Hudson, Mohr and Paucek",
"catchPhrase": "Open-architected bandwidth-monitored capability",
"bs": "cultivate robust solutions"
}
},
{
"id": "78aeae7d-8d53-4578-9a3a-d64bcae496d7",
"name": "Jewell Stracke",
"username": "Cordie1",
"email": "Sabina.Kilback47@yahoo.com",
"address": {
"street": "Adams Divide",
"suite": 84698,
"city": "Auroreborough",
"zipcode": "44653-8480",
"geo": {
"lat": "-65.0718",
"lng": "40.8462"
}
},
"phone": "716-755-7026 x69897",
"website": "talkative-welfare.biz",
"company": {
"name": "Kuhic, Wolf and Beier",
"catchPhrase": "Down-sized systematic structure",
"bs": "cultivate dot-com content"
}
},
{
"id": "ff9804df-8b80-470b-9d41-567796533d11",
"name": "Marjolaine Wintheiser",
"username": "Mattie_Kshlerin",
"email": "Hans_Erdman64@hotmail.com",
"address": {
"street": "Braun Camp",
"suite": 44883,
"city": "North Ludieberg",
"zipcode": "84187",
"geo": {
"lat": "-48.2441",
"lng": "-44.7320"
}
},
"phone": "773.302.6429",
"website": "major-support.name",
"company": {
"name": "Weimann, Hand and Howe",
"catchPhrase": "User-centric static parallelism",
"bs": "optimize B2B web-readiness"
}
},
{
"id": "1866b2e7-9410-4b8a-9605-ba1f87e05704",
"name": "Curtis Berge",
"username": "Bethany_Heller50",
"email": "Julian63@yahoo.com",
"address": {
"street": "Nitzsche Plaza",
"suite": 93965,
"city": "Jaskolskiburgh",
"zipcode": "09452-4322",
"geo": {
"lat": "-48.5011",
"lng": "-9.2312"
}
},
"phone": "(391) 708-8184 x812",
"website": "all-classification.name",
"company": {
"name": "Medhurst Inc",
"catchPhrase": "Down-sized stable collaboration",
"bs": "expedite interactive ROI"
}
},
{
"id": "00298541-5a58-4eec-97b4-1194ef941085",
"name": "Savannah Christiansen",
"username": "Isaias71",
"email": "Santina_Weimann@yahoo.com",
"address": {
"street": "Logan Ferry",
"suite": 44375,
"city": "Goyetteside",
"zipcode": "97485",
"geo": {
"lat": "-82.0722",
"lng": "-43.9117"
}
},
"phone": "205-899-7650",
"website": "entire-rediscovery.name",
"company": {
"name": "Pfannerstill, Torp and Wilkinson",
"catchPhrase": "Cross-platform next generation help-desk",
"bs": "monetize vertical schemas"
}
},
{
"id": "3d4c82d0-97ce-49ab-b9b6-237228a82f67",
"name": "Anissa Feil",
"username": "Fausto_Lynch",
"email": "Amina0@gmail.com",
"address": {
"street": "Bode Burg",
"suite": 72134,
"city": "South San Francisco",
"zipcode": "05470-9876",
"geo": {
"lat": "-13.8790",
"lng": "8.7290"
}
},
"phone": "(485) 860-0559",
"website": "cumbersome-cassava.net",
"company": {
"name": "Reilly and Sons",
"catchPhrase": "Persistent holistic local area network",
"bs": "reintermediate plug-and-play web services"
}
},
{
"id": "61c198ab-1ca3-4502-a1bb-d5b6854aa546",
"name": "Jacky Glover",
"username": "Reece.Keeling",
"email": "Karlee98@yahoo.com",
"address": {
"street": "Kunze Divide",
"suite": 77525,
"city": "Emmerichport",
"zipcode": "18023-4773",
"geo": {
"lat": "71.6558",
"lng": "-47.4377"
}
},
"phone": "1-709-279-8846 x0884",
"website": "physical-rocket-ship.net",
"company": {
"name": "Zboncak Group",
"catchPhrase": "Decentralized mission-critical structure",
"bs": "enable killer ROI"
}
},
{
"id": "55ce8944-d442-4ee7-b35b-2fc0a72a493a",
"name": "Isadore Emard",
"username": "Aubree.Kutch",
"email": "Virgie_OReilly15@yahoo.com",
"address": {
"street": "Braden River",
"suite": 13365,
"city": "Port Carissamouth",
"zipcode": "73314-0257",
"geo": {
"lat": "22.1254",
"lng": "68.5471"
}
},
"phone": "1-921-856-2212 x14454",
"website": "sizzling-moccasins.com",
"company": {
"name": "Hudson Inc",
"catchPhrase": "Multi-tiered actuating framework",
"bs": "implement dynamic e-markets"
}
},
{
"id": "d5500136-2ce3-4187-9a60-078d9d0d2a3e",
"name": "Kiara Hintz",
"username": "Bette_Gusikowski",
"email": "Alayna_Kub@gmail.com",
"address": {
"street": "Toy Glen",
"suite": 57403,
"city": "Lake Rubyeshire",
"zipcode": "38131",
"geo": {
"lat": "-58.3480",
"lng": "151.5382"
}
},
"phone": "581.845.4697",
"website": "grotesque-whisker.biz",
"company": {
"name": "Robel LLC",
"catchPhrase": "Secured executive capability",
"bs": "target compelling infomediaries"
}
}
][
{
"id": "7d6dc116-f4e7-46ab-9853-4746cf0d352b",
"name": "Coralie Kub",
"username": "Christine49",
"email": "Geovanni.Hessel36@hotmail.com",
"address": {
"street": "Jalon Spurs",
"suite": 98239,
"city": "Edwardburgh",
"zipcode": "22214-1786",
"geo": {
"lat": "-78.8521",
"lng": "12.7472"
}
},
"phone": "1-379-386-7239 x3743",
"website": "fragrant-trim.name",
"company": {
"name": "Bailey, Dach and Douglas",
"catchPhrase": "Reduced national secured line",
"bs": "utilize enterprise models"
}
}
]