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": "af0359ff-d17a-47dd-8f01-f9024afd781c",
"name": "Zella Monahan",
"username": "Marina_Gutkowski",
"email": "Karli_Kunze24@yahoo.com",
"address": {
"street": "Clinton Ports",
"suite": 58381,
"city": "West Amaya",
"zipcode": "17220-5577",
"geo": {
"lat": "63.6536",
"lng": "120.2153"
}
},
"phone": "515-630-8181",
"website": "incompatible-whack.net",
"company": {
"name": "Bartell and Sons",
"catchPhrase": "Reverse-engineered methodical local area network",
"bs": "reintermediate frictionless blockchains"
}
},
{
"id": "9d766bc6-3278-4b9c-822e-c30d37396764",
"name": "Claudie Kuhlman",
"username": "Federico8",
"email": "Gerald.Reichert@gmail.com",
"address": {
"street": "Pouros Manors",
"suite": 57516,
"city": "South Janelle",
"zipcode": "15141",
"geo": {
"lat": "-71.0896",
"lng": "131.2986"
}
},
"phone": "713.684.8365",
"website": "pure-brood.info",
"company": {
"name": "Collier, Bosco and Little",
"catchPhrase": "Triple-buffered stable moderator",
"bs": "syndicate user-centric solutions"
}
},
{
"id": "5c5566a9-3a8b-455c-8cb1-aeb45ecd3f66",
"name": "Aglae Feil",
"username": "Holly4",
"email": "Pascale.Franecki31@hotmail.com",
"address": {
"street": "Prosacco Fort",
"suite": 83293,
"city": "Lake Daniella",
"zipcode": "77267-4312",
"geo": {
"lat": "-44.5122",
"lng": "64.1498"
}
},
"phone": "651-394-9329 x260",
"website": "biodegradable-jump.info",
"company": {
"name": "Goyette - Bergnaum",
"catchPhrase": "Visionary bifurcated challenge",
"bs": "brand real-time systems"
}
},
{
"id": "c7203389-b298-4c4b-a7b8-265f37ccf827",
"name": "Deontae Smitham",
"username": "Astrid.Huels",
"email": "Dalton97@yahoo.com",
"address": {
"street": "Kallie Cliff",
"suite": 67489,
"city": "Dickinsonport",
"zipcode": "92233",
"geo": {
"lat": "63.9631",
"lng": "137.1435"
}
},
"phone": "(946) 969-9659 x240",
"website": "alarming-photograph.info",
"company": {
"name": "Zemlak - Reilly",
"catchPhrase": "Polarised clear-thinking matrix",
"bs": "transition leading-edge web-readiness"
}
},
{
"id": "846597b7-3a5a-4b64-8b22-d10f0c066cfe",
"name": "Crystal Padberg",
"username": "Devon10",
"email": "Breana54@gmail.com",
"address": {
"street": "Yadira Lake",
"suite": 51964,
"city": "Dorthybury",
"zipcode": "79305",
"geo": {
"lat": "64.2370",
"lng": "-27.5919"
}
},
"phone": "(862) 866-3769",
"website": "shocked-pulse.net",
"company": {
"name": "Barton Group",
"catchPhrase": "Centralized 3rd generation implementation",
"bs": "productize leading-edge platforms"
}
},
{
"id": "19d891e5-7b60-4263-8ae8-e1ca94fa5b10",
"name": "Electa West",
"username": "Amparo.Lueilwitz12",
"email": "Felicity69@yahoo.com",
"address": {
"street": "Labadie Rapid",
"suite": 14240,
"city": "Evanport",
"zipcode": "94902",
"geo": {
"lat": "65.7383",
"lng": "-112.4333"
}
},
"phone": "598-318-7720 x4170",
"website": "bony-stitch.biz",
"company": {
"name": "Skiles - Ruecker",
"catchPhrase": "Business-focused uniform contingency",
"bs": "enhance efficient experiences"
}
},
{
"id": "0c71c821-c68b-4327-887e-ca21ca97ee8c",
"name": "Lelia Lueilwitz",
"username": "Bell.Corkery",
"email": "Brittany98@gmail.com",
"address": {
"street": "Vernice Dam",
"suite": 21937,
"city": "Lake Kalimouth",
"zipcode": "36753-3723",
"geo": {
"lat": "81.8720",
"lng": "104.0386"
}
},
"phone": "673.356.4712 x20630",
"website": "famous-shade.name",
"company": {
"name": "Runolfsdottir - Hoeger",
"catchPhrase": "Cross-platform well-modulated infrastructure",
"bs": "synthesize turn-key functionalities"
}
},
{
"id": "5ec833d9-1aa5-4b31-8ac9-d20218d79770",
"name": "Urban Runolfsson",
"username": "Zakary.Jacobson85",
"email": "Amya_Keebler@yahoo.com",
"address": {
"street": "Little Brook",
"suite": 85186,
"city": "Katelynhaven",
"zipcode": "56170",
"geo": {
"lat": "48.3667",
"lng": "-4.9820"
}
},
"phone": "300-653-3925 x562",
"website": "uneven-prospect.com",
"company": {
"name": "Johnson - Bergnaum",
"catchPhrase": "Monitored fresh-thinking info-mediaries",
"bs": "monetize interactive eyeballs"
}
},
{
"id": "4ae56217-cd97-489f-bdf9-af8acdeff94e",
"name": "Fredy Reinger",
"username": "Dayna_Dietrich93",
"email": "Grady.MacGyver51@gmail.com",
"address": {
"street": "Gulgowski Garden",
"suite": 99253,
"city": "Lake Greysonfurt",
"zipcode": "71200-1203",
"geo": {
"lat": "65.5071",
"lng": "-29.0282"
}
},
"phone": "(374) 840-1517",
"website": "cool-zoo.info",
"company": {
"name": "Shanahan - Murazik",
"catchPhrase": "Configurable systemic core",
"bs": "expedite extensible ROI"
}
},
{
"id": "620df6f9-1119-4dc2-953e-69dbd342f5b9",
"name": "Omari Carter",
"username": "Sarina87",
"email": "Rosalyn99@yahoo.com",
"address": {
"street": "Hartmann Dam",
"suite": 94046,
"city": "Legrosmouth",
"zipcode": "27723",
"geo": {
"lat": "-61.4110",
"lng": "-151.4661"
}
},
"phone": "1-455-424-1924",
"website": "swift-solicitation.biz",
"company": {
"name": "Parker - O'Conner",
"catchPhrase": "Front-line stable secured line",
"bs": "redefine best-of-breed deliverables"
}
},
{
"id": "2bf9f60f-e139-4db3-bdb9-41370bc95003",
"name": "Benny Macejkovic",
"username": "Jaleel_Effertz77",
"email": "Baby_Nolan@gmail.com",
"address": {
"street": "Mante Wall",
"suite": 64348,
"city": "Morissettetown",
"zipcode": "59840",
"geo": {
"lat": "-14.9953",
"lng": "-176.7737"
}
},
"phone": "433-543-2138 x780",
"website": "melodic-captain.org",
"company": {
"name": "Bradtke Group",
"catchPhrase": "Organized global hub",
"bs": "deploy open-source solutions"
}
},
{
"id": "a0ef8712-28d7-43ad-8483-c26ce57fc6b0",
"name": "Lavern Larkin",
"username": "Stuart32",
"email": "Donato.Davis71@hotmail.com",
"address": {
"street": "Vernice Field",
"suite": 30733,
"city": "North Kattiemouth",
"zipcode": "15618-4949",
"geo": {
"lat": "72.1172",
"lng": "-48.6816"
}
},
"phone": "(396) 317-1768",
"website": "lustrous-commerce.org",
"company": {
"name": "Gorczany - Kling",
"catchPhrase": "Networked composite frame",
"bs": "incubate e-business platforms"
}
},
{
"id": "4e801c2e-1e88-4792-a5b1-a8a868e3f311",
"name": "Wilfredo Corwin",
"username": "Margie21",
"email": "Davion19@yahoo.com",
"address": {
"street": "Petra Spring",
"suite": 14546,
"city": "Swiftshire",
"zipcode": "38827",
"geo": {
"lat": "14.5642",
"lng": "115.9731"
}
},
"phone": "(972) 942-0584 x63753",
"website": "easy-penis.com",
"company": {
"name": "Kautzer - Gleichner",
"catchPhrase": "Multi-layered motivating parallelism",
"bs": "transform magnetic solutions"
}
},
{
"id": "74d47bc8-e90c-40be-9a05-1e7ea0957142",
"name": "Royal Stroman",
"username": "Ross44",
"email": "Destinee_Schiller93@gmail.com",
"address": {
"street": "Rempel River",
"suite": 42235,
"city": "Lake Helene",
"zipcode": "60314",
"geo": {
"lat": "-48.0777",
"lng": "32.5059"
}
},
"phone": "531.956.3114",
"website": "querulous-gamebird.org",
"company": {
"name": "Dickens, Skiles and Larkin",
"catchPhrase": "Assimilated multimedia paradigm",
"bs": "recontextualize sexy e-tailers"
}
},
{
"id": "9a0d7111-7161-456b-b8d0-c05dbbf3f809",
"name": "Verda Tremblay",
"username": "Keely.Feest",
"email": "Haskell5@hotmail.com",
"address": {
"street": "Nienow Islands",
"suite": 2973,
"city": "Brownsville",
"zipcode": "27773",
"geo": {
"lat": "84.5902",
"lng": "-79.9066"
}
},
"phone": "498-704-2637 x692",
"website": "worse-ladle.org",
"company": {
"name": "Beier, Hintz and Reilly",
"catchPhrase": "Advanced executive solution",
"bs": "exploit real-time architectures"
}
},
{
"id": "332b4c01-d3dc-4155-a2ff-a1100163908e",
"name": "Jude Wolf",
"username": "Adelle.Gulgowski22",
"email": "Jayne.Robel72@hotmail.com",
"address": {
"street": "Esther Turnpike",
"suite": 56657,
"city": "West Danamouth",
"zipcode": "23952-5197",
"geo": {
"lat": "23.7124",
"lng": "116.0050"
}
},
"phone": "1-406-651-8601",
"website": "amusing-shot.name",
"company": {
"name": "Casper - Shields",
"catchPhrase": "De-engineered hybrid concept",
"bs": "optimize robust schemas"
}
},
{
"id": "d1fcb728-e26d-4db0-a67b-d9efc5278a0e",
"name": "Maudie McGlynn",
"username": "Marisa1",
"email": "Otis_Stracke@yahoo.com",
"address": {
"street": "Daniel Falls",
"suite": 88897,
"city": "Ebertbury",
"zipcode": "45899-4330",
"geo": {
"lat": "-7.5157",
"lng": "8.9444"
}
},
"phone": "845-458-3567 x917",
"website": "total-toaster.net",
"company": {
"name": "Stamm - Beier",
"catchPhrase": "Cross-platform 6th generation forecast",
"bs": "streamline e-business mindshare"
}
},
{
"id": "de4a3a75-d5bc-4191-ae61-f16ce78d7adb",
"name": "Halle McLaughlin",
"username": "Noemi_Boyer",
"email": "Derek55@gmail.com",
"address": {
"street": "Jaskolski Harbor",
"suite": 82245,
"city": "Hudsonville",
"zipcode": "27816-0182",
"geo": {
"lat": "86.0912",
"lng": "92.1490"
}
},
"phone": "454.476.1821 x3393",
"website": "young-nurture.com",
"company": {
"name": "Wintheiser, Leannon and Zboncak",
"catchPhrase": "Balanced bottom-line groupware",
"bs": "engage granular technologies"
}
},
{
"id": "f897ef85-95ce-4ee3-894b-48b8ee729384",
"name": "Malika Konopelski",
"username": "Bradley_Jacobson",
"email": "Makayla78@gmail.com",
"address": {
"street": "Chloe Place",
"suite": 81683,
"city": "Jedidiahburgh",
"zipcode": "55853",
"geo": {
"lat": "-85.6574",
"lng": "-124.4722"
}
},
"phone": "448-887-5581",
"website": "original-sari.org",
"company": {
"name": "Blanda, Price and McLaughlin",
"catchPhrase": "Synergized local website",
"bs": "reinvent plug-and-play users"
}
},
{
"id": "cf9d809d-5fd5-4628-b60f-c496a7c6002d",
"name": "Nathan Shields",
"username": "Brooke6",
"email": "Misael.Hackett@hotmail.com",
"address": {
"street": "Block Loaf",
"suite": 32273,
"city": "Adelamouth",
"zipcode": "97760",
"geo": {
"lat": "-40.8703",
"lng": "130.7015"
}
},
"phone": "(206) 948-7706",
"website": "this-slump.name",
"company": {
"name": "Schneider LLC",
"catchPhrase": "Fundamental intermediate product",
"bs": "cultivate distributed users"
}
},
{
"id": "a3ed0b8c-61a0-4056-ac20-24685a02a479",
"name": "Hayden Greenholt",
"username": "Berry29",
"email": "Janet_Dickinson@gmail.com",
"address": {
"street": "Ambrose Pines",
"suite": 99155,
"city": "Bentonville",
"zipcode": "47960-8644",
"geo": {
"lat": "50.9347",
"lng": "34.6848"
}
},
"phone": "659.836.7458 x0567",
"website": "arctic-speaking.com",
"company": {
"name": "Padberg Inc",
"catchPhrase": "Secured bandwidth-monitored local area network",
"bs": "aggregate efficient bandwidth"
}
},
{
"id": "5cd69a93-9587-4934-a534-54dc3e3a544c",
"name": "Nicolette Denesik",
"username": "Vallie_Langosh4",
"email": "Camden.Olson20@hotmail.com",
"address": {
"street": "DuBuque Roads",
"suite": 25570,
"city": "Yuba City",
"zipcode": "46969",
"geo": {
"lat": "-13.4902",
"lng": "-29.8081"
}
},
"phone": "545-750-8659 x28494",
"website": "weird-tussle.net",
"company": {
"name": "Buckridge LLC",
"catchPhrase": "Proactive interactive concept",
"bs": "orchestrate best-of-breed methodologies"
}
},
{
"id": "c4e5cf73-3697-44c6-b763-8479ad53478c",
"name": "Breana McDermott",
"username": "Sean_Dooley78",
"email": "Terence_Jaskolski6@yahoo.com",
"address": {
"street": "Guido Plaza",
"suite": 11615,
"city": "Marvinstad",
"zipcode": "05186",
"geo": {
"lat": "56.8202",
"lng": "-117.6802"
}
},
"phone": "822.834.5344 x84175",
"website": "esteemed-walnut.biz",
"company": {
"name": "Rogahn - Kub",
"catchPhrase": "Mandatory optimizing knowledge user",
"bs": "grow vertical e-markets"
}
},
{
"id": "cbae5295-b87f-417c-b24a-4c1734e4d96c",
"name": "Veronica Mueller",
"username": "Breanne1",
"email": "Newell.Kemmer@gmail.com",
"address": {
"street": "Gisselle Haven",
"suite": 43007,
"city": "Gerdamouth",
"zipcode": "46872",
"geo": {
"lat": "-75.7922",
"lng": "-96.4591"
}
},
"phone": "746.330.8105 x29611",
"website": "deafening-lifestyle.net",
"company": {
"name": "Larson - Renner",
"catchPhrase": "Secured regional definition",
"bs": "drive bricks-and-clicks solutions"
}
},
{
"id": "71d63c47-4ee8-47f9-ab82-c201addd5fc1",
"name": "Lemuel Wilkinson",
"username": "Julius11",
"email": "Pearlie_Wintheiser@hotmail.com",
"address": {
"street": "Una Inlet",
"suite": 11325,
"city": "East Sheridanbury",
"zipcode": "39870",
"geo": {
"lat": "20.7054",
"lng": "-128.5081"
}
},
"phone": "(431) 650-7979 x1296",
"website": "hopeful-exasperation.info",
"company": {
"name": "MacGyver, Rau and Schuppe",
"catchPhrase": "Synergized demand-driven knowledge user",
"bs": "streamline holistic metrics"
}
},
{
"id": "624bf884-3385-4dec-b721-f6984df2727e",
"name": "Juwan Hane",
"username": "Alford57",
"email": "Porter_Connelly@yahoo.com",
"address": {
"street": "Hansen Crossroad",
"suite": 75932,
"city": "West Alphonso",
"zipcode": "93971-4865",
"geo": {
"lat": "26.7647",
"lng": "84.9994"
}
},
"phone": "950-776-7605",
"website": "charming-coaster.com",
"company": {
"name": "Kulas - Will",
"catchPhrase": "Phased motivating extranet",
"bs": "facilitate real-time metrics"
}
},
{
"id": "0c8aba7c-6cb9-42f7-9e1c-dbc7b5427bfa",
"name": "Osbaldo Grant",
"username": "Jasper.OHara67",
"email": "Ashlynn48@hotmail.com",
"address": {
"street": "Brionna Key",
"suite": 82393,
"city": "Blickfort",
"zipcode": "84936-4525",
"geo": {
"lat": "17.6627",
"lng": "-173.5044"
}
},
"phone": "1-912-479-5497",
"website": "untimely-bay.biz",
"company": {
"name": "Feil - Johnston",
"catchPhrase": "Synergistic optimal monitoring",
"bs": "deliver bleeding-edge action-items"
}
},
{
"id": "e5dbeb6c-0a42-44fc-8536-c479aa83745f",
"name": "Chelsie Veum",
"username": "Alexandra.Lesch",
"email": "Augustine_Schmeler79@gmail.com",
"address": {
"street": "Jessica Bridge",
"suite": 65440,
"city": "Port Madonna",
"zipcode": "83103-7358",
"geo": {
"lat": "-24.8218",
"lng": "-172.9115"
}
},
"phone": "(322) 202-1178 x6728",
"website": "shabby-larch.name",
"company": {
"name": "Stiedemann - Bauch",
"catchPhrase": "Re-engineered global policy",
"bs": "brand one-to-one e-tailers"
}
},
{
"id": "d97f5161-f0c9-4d5d-b6bc-fdce066cf77e",
"name": "Bart Bergnaum",
"username": "Ryan_Buckridge",
"email": "Verner_Cruickshank13@yahoo.com",
"address": {
"street": "Zieme Coves",
"suite": 84249,
"city": "North Sydnimouth",
"zipcode": "19873",
"geo": {
"lat": "66.8408",
"lng": "-7.3635"
}
},
"phone": "(836) 749-1149",
"website": "spotted-detour.info",
"company": {
"name": "Bosco - Predovic",
"catchPhrase": "Fundamental regional adapter",
"bs": "reinvent innovative bandwidth"
}
},
{
"id": "b485c783-aa26-4285-a49e-d2aabbd887c6",
"name": "Miller Blanda",
"username": "Barney_Crooks45",
"email": "Abe_Wilderman@hotmail.com",
"address": {
"street": "Rosemary Ports",
"suite": 16086,
"city": "Lake Mckennafurt",
"zipcode": "85949-6837",
"geo": {
"lat": "56.5865",
"lng": "20.3912"
}
},
"phone": "455-391-9473 x4546",
"website": "pink-trace.org",
"company": {
"name": "Sauer - Douglas",
"catchPhrase": "Realigned zero tolerance monitoring",
"bs": "scale innovative networks"
}
}
][
{
"id": "c7203389-b298-4c4b-a7b8-265f37ccf827",
"name": "Deontae Smitham",
"username": "Astrid.Huels",
"email": "Dalton97@yahoo.com",
"address": {
"street": "Kallie Cliff",
"suite": 67489,
"city": "Dickinsonport",
"zipcode": "92233",
"geo": {
"lat": "63.9631",
"lng": "137.1435"
}
},
"phone": "(946) 969-9659 x240",
"website": "alarming-photograph.info",
"company": {
"name": "Zemlak - Reilly",
"catchPhrase": "Polarised clear-thinking matrix",
"bs": "transition leading-edge web-readiness"
}
}
]