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": "1881d872-34db-4d2c-b463-1cbbaed8b1bb",
"name": "Annabel Hayes",
"username": "Gaetano28",
"email": "Tom_Hodkiewicz58@gmail.com",
"address": {
"street": "Toby Plains",
"suite": 37778,
"city": "North Patriciastad",
"zipcode": "39300-4553",
"geo": {
"lat": "84.0040",
"lng": "144.7858"
}
},
"phone": "278-664-2589 x9240",
"website": "awkward-snob.com",
"company": {
"name": "Kuphal - Kirlin",
"catchPhrase": "Re-engineered coherent challenge",
"bs": "unleash integrated deliverables"
}
},
{
"id": "52a0b7a9-a690-41b4-bd8b-d3d9ac8d8bbe",
"name": "Idella Rohan",
"username": "Jaylen29",
"email": "Ashlee20@hotmail.com",
"address": {
"street": "Ward Lights",
"suite": 8455,
"city": "Newton",
"zipcode": "25565-6220",
"geo": {
"lat": "82.7735",
"lng": "-138.8014"
}
},
"phone": "472-640-9438 x281",
"website": "pink-family.name",
"company": {
"name": "Mosciski and Sons",
"catchPhrase": "Implemented impactful encryption",
"bs": "productize sticky interfaces"
}
},
{
"id": "887c1991-bc38-4cc0-9829-fbdf97054134",
"name": "Keanu Goyette",
"username": "Berneice47",
"email": "Effie_Roob26@gmail.com",
"address": {
"street": "Lavinia Ford",
"suite": 61392,
"city": "Lake Lester",
"zipcode": "62387-5828",
"geo": {
"lat": "-24.3308",
"lng": "68.0478"
}
},
"phone": "400-422-7368 x4815",
"website": "nifty-orchard.info",
"company": {
"name": "Treutel, Parker and Glover",
"catchPhrase": "Multi-tiered 6th generation website",
"bs": "streamline world-class infomediaries"
}
},
{
"id": "bf50aaa0-0be7-4c63-a8ca-252426413874",
"name": "Matilde Brown",
"username": "Letitia77",
"email": "Marjory36@gmail.com",
"address": {
"street": "Bailey Ways",
"suite": 45587,
"city": "Vilmafurt",
"zipcode": "20990",
"geo": {
"lat": "-12.9692",
"lng": "-159.8645"
}
},
"phone": "(382) 621-7943 x047",
"website": "vivacious-bowtie.name",
"company": {
"name": "Champlin - Rohan",
"catchPhrase": "Streamlined optimal hub",
"bs": "engineer frictionless models"
}
},
{
"id": "cd828fda-ab05-45dc-9f56-8bff6f6faadc",
"name": "Watson Dibbert",
"username": "Keon96",
"email": "Haley.Prosacco@hotmail.com",
"address": {
"street": "Hahn Loaf",
"suite": 18212,
"city": "West Zackerychester",
"zipcode": "29470-6126",
"geo": {
"lat": "-7.0768",
"lng": "-82.1661"
}
},
"phone": "990-521-2334",
"website": "hidden-choir.name",
"company": {
"name": "Bergstrom, Marvin and Cartwright",
"catchPhrase": "Fundamental exuding budgetary management",
"bs": "deliver bleeding-edge interfaces"
}
},
{
"id": "37431d3e-aec0-49ee-a27e-06ef54f9bd35",
"name": "Melvina Ondricka",
"username": "Alejandrin_Mayert",
"email": "Lenora.Howell@hotmail.com",
"address": {
"street": "Hayes Route",
"suite": 79197,
"city": "Dickihaven",
"zipcode": "97699",
"geo": {
"lat": "40.9060",
"lng": "-100.2321"
}
},
"phone": "358.862.6831",
"website": "loose-noodles.com",
"company": {
"name": "Corwin LLC",
"catchPhrase": "Visionary human-resource pricing structure",
"bs": "envisioneer efficient methodologies"
}
},
{
"id": "dd1a0857-ed15-4fcc-85b2-1f19846f0ac4",
"name": "Cyrus Brekke",
"username": "Lina.Harris55",
"email": "Shyann_Franey@hotmail.com",
"address": {
"street": "Reynolds Rapid",
"suite": 59017,
"city": "Lake Rosendoside",
"zipcode": "75791-8459",
"geo": {
"lat": "59.2817",
"lng": "96.7714"
}
},
"phone": "1-283-708-0039 x6477",
"website": "sweaty-cheesecake.net",
"company": {
"name": "Hickle - Torp",
"catchPhrase": "Profit-focused stable concept",
"bs": "deliver visionary architectures"
}
},
{
"id": "64e23c76-b2a2-4f29-8bbd-ca7d96aa50b1",
"name": "Ismael Ondricka",
"username": "Murray.Grady",
"email": "Amani.Volkman@yahoo.com",
"address": {
"street": "Hilpert Drive",
"suite": 31007,
"city": "Lillianchester",
"zipcode": "17566",
"geo": {
"lat": "57.3189",
"lng": "-154.3815"
}
},
"phone": "1-549-790-8920 x90815",
"website": "this-trowel.net",
"company": {
"name": "Harvey - Dietrich",
"catchPhrase": "Self-enabling explicit installation",
"bs": "incentivize clicks-and-mortar infrastructures"
}
},
{
"id": "bd750425-95a2-4edb-b530-710424f8e40d",
"name": "Jaden Klein",
"username": "Cullen_Bergnaum54",
"email": "Hershel.Kuvalis@gmail.com",
"address": {
"street": "O'Reilly Meadow",
"suite": 78378,
"city": "Germantown",
"zipcode": "01901",
"geo": {
"lat": "21.8274",
"lng": "53.8738"
}
},
"phone": "789.682.6787 x301",
"website": "delayed-enjoyment.biz",
"company": {
"name": "Robel - Hansen",
"catchPhrase": "Configurable uniform initiative",
"bs": "reintermediate extensible e-tailers"
}
},
{
"id": "43e76346-7cb7-4e0c-9819-6865012c3608",
"name": "Ike Dibbert",
"username": "Julien.Okuneva2",
"email": "Xzavier86@yahoo.com",
"address": {
"street": "Yost Corners",
"suite": 95193,
"city": "Great Falls",
"zipcode": "17573-8517",
"geo": {
"lat": "88.4692",
"lng": "74.0230"
}
},
"phone": "1-279-848-7289 x49054",
"website": "unnatural-bobcat.org",
"company": {
"name": "Oberbrunner, Jones and Carroll",
"catchPhrase": "Customizable 24/7 pricing structure",
"bs": "enable rich action-items"
}
},
{
"id": "45331c16-c78e-477b-b9a4-7f92133aa05c",
"name": "Rene Cremin",
"username": "Mohammad.Davis10",
"email": "Baylee.Kautzer59@gmail.com",
"address": {
"street": "Senger Trail",
"suite": 58838,
"city": "West Guiseppe",
"zipcode": "86023-1642",
"geo": {
"lat": "-47.8466",
"lng": "153.0272"
}
},
"phone": "(785) 680-5403",
"website": "infamous-privacy.name",
"company": {
"name": "Spinka, Vandervort and Wiegand",
"catchPhrase": "Advanced 3rd generation open architecture",
"bs": "architect seamless partnerships"
}
},
{
"id": "2699fd61-7c13-4459-a771-60b11669fb9d",
"name": "Clarabelle Robel",
"username": "Bennie8",
"email": "Brandyn.Heller@yahoo.com",
"address": {
"street": "Cynthia Brook",
"suite": 13508,
"city": "Mullerfort",
"zipcode": "07632",
"geo": {
"lat": "39.2369",
"lng": "-1.1679"
}
},
"phone": "277.566.9144",
"website": "leafy-swimming.com",
"company": {
"name": "Toy and Sons",
"catchPhrase": "User-centric next generation conglomeration",
"bs": "streamline one-to-one synergies"
}
},
{
"id": "84c8f272-ddc3-4c98-917b-d88e80a87447",
"name": "Cale Feeney",
"username": "Alvah_Langworth90",
"email": "Brandyn_Borer@gmail.com",
"address": {
"street": "Max Parks",
"suite": 68376,
"city": "Kasandrafort",
"zipcode": "48816-1669",
"geo": {
"lat": "72.2197",
"lng": "7.0369"
}
},
"phone": "1-865-931-1724",
"website": "sparkling-founder.info",
"company": {
"name": "Lebsack, Nitzsche and Nitzsche",
"catchPhrase": "Synergistic clear-thinking paradigm",
"bs": "redefine mission-critical eyeballs"
}
},
{
"id": "d7843658-8be4-46f1-8e4e-a70add35dc62",
"name": "Amani Breitenberg",
"username": "Isobel.Sauer40",
"email": "Lon.Parisian25@gmail.com",
"address": {
"street": "Sonny Falls",
"suite": 11088,
"city": "Brannonhaven",
"zipcode": "42344-9640",
"geo": {
"lat": "51.3041",
"lng": "106.2071"
}
},
"phone": "406-989-3324 x401",
"website": "voluminous-flat.biz",
"company": {
"name": "Quitzon - Okuneva",
"catchPhrase": "Persevering composite utilisation",
"bs": "recontextualize viral communities"
}
},
{
"id": "5268b5c4-e385-44b9-9c79-63e19020341b",
"name": "Sydnee Nolan",
"username": "Conor_Schmeler",
"email": "Stone.Mraz66@yahoo.com",
"address": {
"street": "Libbie Trail",
"suite": 46078,
"city": "Luisborough",
"zipcode": "30705-7173",
"geo": {
"lat": "-76.0259",
"lng": "-79.8622"
}
},
"phone": "(838) 713-5359 x0029",
"website": "worried-minute.name",
"company": {
"name": "O'Conner - Von",
"catchPhrase": "Monitored solution-oriented open system",
"bs": "scale bricks-and-clicks relationships"
}
},
{
"id": "e1cab946-20c8-436a-82c8-78f6b36a2aa0",
"name": "Angela Gleason",
"username": "Yadira10",
"email": "Haskell.Marks@yahoo.com",
"address": {
"street": "Ebert Spurs",
"suite": 37711,
"city": "Port Lennieshire",
"zipcode": "91581",
"geo": {
"lat": "-14.2202",
"lng": "-146.9312"
}
},
"phone": "(244) 397-8335 x94347",
"website": "exotic-chili.info",
"company": {
"name": "Harber - Zulauf",
"catchPhrase": "Synchronised needs-based success",
"bs": "deliver frictionless models"
}
},
{
"id": "7b272761-1e17-481a-b05e-d3a599db0765",
"name": "Sylvan Effertz",
"username": "Russell.Block",
"email": "Van_Greenfelder@gmail.com",
"address": {
"street": "Zboncak Mountain",
"suite": 43973,
"city": "South Brionnahaven",
"zipcode": "19453-4994",
"geo": {
"lat": "-49.4316",
"lng": "0.4401"
}
},
"phone": "574-838-8521",
"website": "quarterly-disconnection.info",
"company": {
"name": "Casper - Jaskolski",
"catchPhrase": "Diverse encompassing definition",
"bs": "transition cross-media vortals"
}
},
{
"id": "e51730e8-88b1-4df7-aaf9-1e1c75e5b29e",
"name": "Aiyana Dicki",
"username": "Harry.Schumm",
"email": "Bryce20@yahoo.com",
"address": {
"street": "Zieme Haven",
"suite": 69969,
"city": "Lake Frankie",
"zipcode": "47346-1610",
"geo": {
"lat": "-17.8399",
"lng": "-178.2139"
}
},
"phone": "881.999.4129",
"website": "glum-drag.name",
"company": {
"name": "Rolfson, Rogahn and Stark",
"catchPhrase": "Business-focused tangible interface",
"bs": "reintermediate granular architectures"
}
},
{
"id": "e022dcb2-a683-4f7c-9447-440593994bc8",
"name": "Madisen Emard",
"username": "Nash90",
"email": "Declan_Vandervort58@gmail.com",
"address": {
"street": "Parker Crescent",
"suite": 60384,
"city": "Lake Joanychester",
"zipcode": "22011-9106",
"geo": {
"lat": "61.7404",
"lng": "36.9778"
}
},
"phone": "731-415-6862 x5691",
"website": "orange-banner.biz",
"company": {
"name": "Bednar and Sons",
"catchPhrase": "Cross-platform exuding support",
"bs": "embrace user-centric synergies"
}
},
{
"id": "3c91004d-fe10-492d-8fe2-ac1b6a3e1168",
"name": "Celestine Sanford",
"username": "Noemy.VonRueden",
"email": "Eugenia.Dickens@hotmail.com",
"address": {
"street": "Cassin Walk",
"suite": 22480,
"city": "Attleboro",
"zipcode": "29665",
"geo": {
"lat": "10.8253",
"lng": "-51.4265"
}
},
"phone": "855-311-9881 x3750",
"website": "limp-regionalism.biz",
"company": {
"name": "Lakin - Wolf",
"catchPhrase": "Reactive impactful collaboration",
"bs": "deploy out-of-the-box supply-chains"
}
},
{
"id": "875292eb-a7ec-4fb8-af98-70545a0a1985",
"name": "Emerald Nader",
"username": "Esteban.Larkin56",
"email": "Shanon47@gmail.com",
"address": {
"street": "Fritsch Ridge",
"suite": 58531,
"city": "South Sophiehaven",
"zipcode": "14334",
"geo": {
"lat": "12.9025",
"lng": "127.6384"
}
},
"phone": "649.289.9705 x295",
"website": "noisy-terror.com",
"company": {
"name": "Osinski - Ferry",
"catchPhrase": "Re-contextualized heuristic projection",
"bs": "incubate open-source content"
}
},
{
"id": "71d7576e-d0d0-4de9-ac9f-a184921b167b",
"name": "Domenica Goodwin",
"username": "Tyra_Denesik",
"email": "Marcelino86@hotmail.com",
"address": {
"street": "Walsh Freeway",
"suite": 65551,
"city": "Naderfurt",
"zipcode": "13818",
"geo": {
"lat": "24.5247",
"lng": "160.2122"
}
},
"phone": "332-915-5590 x9135",
"website": "shoddy-exposition.name",
"company": {
"name": "Gleason - Kuphal",
"catchPhrase": "Enterprise-wide bifurcated strategy",
"bs": "scale cross-media methodologies"
}
},
{
"id": "fd463205-e3cb-40d1-9d15-7c178edb9794",
"name": "Jaylan Dooley",
"username": "Haven_Bartoletti",
"email": "Odie.Sauer35@hotmail.com",
"address": {
"street": "Gusikowski Mall",
"suite": 79864,
"city": "East Ottilieside",
"zipcode": "48519",
"geo": {
"lat": "19.8586",
"lng": "156.3379"
}
},
"phone": "395-502-2079 x49821",
"website": "slippery-creator.com",
"company": {
"name": "Metz - Bernier",
"catchPhrase": "Intuitive national productivity",
"bs": "recontextualize killer markets"
}
},
{
"id": "8dadedc0-8c1a-469e-bd8c-b920214279dd",
"name": "Imelda Rice",
"username": "Garett45",
"email": "Lucius.Beier48@gmail.com",
"address": {
"street": "Wehner Squares",
"suite": 9031,
"city": "Aidaburgh",
"zipcode": "26488",
"geo": {
"lat": "35.0274",
"lng": "-135.6575"
}
},
"phone": "1-717-323-3203",
"website": "excitable-soliloquy.org",
"company": {
"name": "Spinka, Boyle and Stark",
"catchPhrase": "Organic homogeneous circuit",
"bs": "generate world-class portals"
}
},
{
"id": "6d1c2a40-bdf9-46d5-9a7b-a1837343c306",
"name": "Kale Skiles",
"username": "Trudie50",
"email": "Jonatan.Prohaska3@yahoo.com",
"address": {
"street": "Schaden Path",
"suite": 84130,
"city": "Lake Vanceport",
"zipcode": "97782",
"geo": {
"lat": "-14.1528",
"lng": "-1.0455"
}
},
"phone": "547.247.9607",
"website": "exotic-mop.name",
"company": {
"name": "Bins Group",
"catchPhrase": "Public-key bifurcated migration",
"bs": "target clicks-and-mortar initiatives"
}
},
{
"id": "41feeecf-b4e7-4f6b-8dd0-55fdcc1097bf",
"name": "Mazie Steuber",
"username": "Larue60",
"email": "Franco.Paucek@yahoo.com",
"address": {
"street": "Cummerata Highway",
"suite": 56473,
"city": "South Marlee",
"zipcode": "81453",
"geo": {
"lat": "14.5672",
"lng": "93.6928"
}
},
"phone": "882-462-4605",
"website": "monstrous-encouragement.net",
"company": {
"name": "Willms LLC",
"catchPhrase": "Open-architected leading edge success",
"bs": "innovate killer experiences"
}
},
{
"id": "95d4412f-839c-4ee7-acca-f8279f150097",
"name": "Lura Jakubowski",
"username": "Kaley_Cassin37",
"email": "Davonte_Koelpin88@gmail.com",
"address": {
"street": "Anastasia Circle",
"suite": 32131,
"city": "East Berthaside",
"zipcode": "55283-6475",
"geo": {
"lat": "-38.0372",
"lng": "155.4772"
}
},
"phone": "(413) 426-7521",
"website": "vacant-toot.info",
"company": {
"name": "O'Kon, Maggio and Rosenbaum",
"catchPhrase": "Customizable stable function",
"bs": "implement extensible networks"
}
},
{
"id": "9b4b1c57-3a4b-4fb6-a3be-56a3dde9d88c",
"name": "Karolann Yost",
"username": "Heidi_Dare23",
"email": "Joy68@yahoo.com",
"address": {
"street": "Lolita Village",
"suite": 60242,
"city": "Dasiafort",
"zipcode": "16582-0717",
"geo": {
"lat": "-35.6534",
"lng": "-148.3093"
}
},
"phone": "787.417.9812 x11575",
"website": "spiteful-rush.info",
"company": {
"name": "Purdy - Pagac",
"catchPhrase": "Intuitive asymmetric ability",
"bs": "innovate user-centric synergies"
}
},
{
"id": "1ca50f31-9e95-4e47-b1a5-b8e3c6e7a05b",
"name": "Johnathon Ortiz",
"username": "Lane_Pouros",
"email": "Duncan50@gmail.com",
"address": {
"street": "Jerod Islands",
"suite": 33833,
"city": "South Richiechester",
"zipcode": "98977",
"geo": {
"lat": "-52.6811",
"lng": "94.8408"
}
},
"phone": "(885) 284-9841",
"website": "profitable-object.com",
"company": {
"name": "Schuster - Kling",
"catchPhrase": "Organic systematic help-desk",
"bs": "cultivate ubiquitous partnerships"
}
},
{
"id": "c8920fbf-7251-46ab-b592-c93d31a94594",
"name": "Austin Casper",
"username": "Hermann_Weissnat30",
"email": "Luther29@yahoo.com",
"address": {
"street": "Else Skyway",
"suite": 68925,
"city": "Lindgrenton",
"zipcode": "16865",
"geo": {
"lat": "-59.6861",
"lng": "22.4753"
}
},
"phone": "(769) 709-0214 x798",
"website": "energetic-utility.biz",
"company": {
"name": "Leannon, Tremblay and O'Reilly",
"catchPhrase": "Streamlined reciprocal product",
"bs": "facilitate rich infomediaries"
}
}
][
{
"id": "bf50aaa0-0be7-4c63-a8ca-252426413874",
"name": "Matilde Brown",
"username": "Letitia77",
"email": "Marjory36@gmail.com",
"address": {
"street": "Bailey Ways",
"suite": 45587,
"city": "Vilmafurt",
"zipcode": "20990",
"geo": {
"lat": "-12.9692",
"lng": "-159.8645"
}
},
"phone": "(382) 621-7943 x047",
"website": "vivacious-bowtie.name",
"company": {
"name": "Champlin - Rohan",
"catchPhrase": "Streamlined optimal hub",
"bs": "engineer frictionless models"
}
}
]