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": "d6ee907c-6fbd-4b76-94a2-a562fee0726f",
"name": "Eduardo Barrows",
"username": "Kiara_Beatty10",
"email": "Jeffery_Feeney@hotmail.com",
"address": {
"street": "Crystal Alley",
"suite": 35855,
"city": "Gaylordport",
"zipcode": "15379",
"geo": {
"lat": "6.1929",
"lng": "-58.9771"
}
},
"phone": "1-510-579-9144 x0138",
"website": "splendid-perspective.info",
"company": {
"name": "Fisher Inc",
"catchPhrase": "Multi-lateral 3rd generation instruction set",
"bs": "embrace user-centric web-readiness"
}
},
{
"id": "4c8993c1-98af-45d9-b63f-bb828b096164",
"name": "Susanna Ferry",
"username": "Lauretta_Waters",
"email": "Layne.Purdy@gmail.com",
"address": {
"street": "Joey Groves",
"suite": 83423,
"city": "Macyborough",
"zipcode": "20799",
"geo": {
"lat": "-70.1767",
"lng": "159.8348"
}
},
"phone": "758-398-5998 x57830",
"website": "true-method.info",
"company": {
"name": "Kertzmann, Ankunding and Osinski",
"catchPhrase": "Secured leading edge paradigm",
"bs": "disintermediate magnetic e-markets"
}
},
{
"id": "5f49c76d-d3c4-40ec-86b2-0e9ddf55936e",
"name": "Eulah Beahan",
"username": "Jaydon_Hagenes",
"email": "Gracie_Frami@gmail.com",
"address": {
"street": "Mosciski Centers",
"suite": 93015,
"city": "Alaynashire",
"zipcode": "95712",
"geo": {
"lat": "-17.7068",
"lng": "-150.5798"
}
},
"phone": "376-901-2258 x35075",
"website": "jovial-zero.net",
"company": {
"name": "Macejkovic Inc",
"catchPhrase": "Cloned intermediate intranet",
"bs": "scale killer models"
}
},
{
"id": "910a3836-4190-49d3-b820-0b0e08977df4",
"name": "Cathryn Wyman",
"username": "Consuelo.Renner",
"email": "Emerson.Champlin90@gmail.com",
"address": {
"street": "Schneider Landing",
"suite": 29086,
"city": "Cruzfort",
"zipcode": "52046-9780",
"geo": {
"lat": "52.8262",
"lng": "-169.7025"
}
},
"phone": "1-254-397-8635 x3003",
"website": "serious-moustache.name",
"company": {
"name": "Bartoletti Inc",
"catchPhrase": "Enterprise-wide systemic attitude",
"bs": "maximize 24/7 infomediaries"
}
},
{
"id": "a0b47806-390a-4122-8253-79dd5f33dfcc",
"name": "Karianne Hodkiewicz",
"username": "Manuela.Hammes",
"email": "Devonte.Lockman@hotmail.com",
"address": {
"street": "Stoltenberg Passage",
"suite": 95763,
"city": "Nikolauston",
"zipcode": "18455-4752",
"geo": {
"lat": "61.1545",
"lng": "89.1563"
}
},
"phone": "1-754-915-4203 x3693",
"website": "golden-harvest.org",
"company": {
"name": "Hodkiewicz LLC",
"catchPhrase": "Expanded 24 hour hub",
"bs": "scale B2C content"
}
},
{
"id": "5eb326fa-bb90-46d2-97d3-799cf22f8d68",
"name": "Alexandria Herzog",
"username": "Brisa_Murazik",
"email": "Jake_Schaefer@hotmail.com",
"address": {
"street": "Graham Run",
"suite": 67018,
"city": "New Lorena",
"zipcode": "40063-3594",
"geo": {
"lat": "82.7517",
"lng": "60.3585"
}
},
"phone": "372.582.5811",
"website": "lame-peninsula.info",
"company": {
"name": "Zemlak - Mitchell",
"catchPhrase": "Polarised methodical productivity",
"bs": "target visionary action-items"
}
},
{
"id": "c4650071-f551-4373-82a2-d3e36332604b",
"name": "Greg Reichert",
"username": "Drake74",
"email": "Lonie.OConner60@yahoo.com",
"address": {
"street": "Durgan Streets",
"suite": 3066,
"city": "Marquardtfort",
"zipcode": "77957",
"geo": {
"lat": "-25.5218",
"lng": "-39.9804"
}
},
"phone": "1-969-237-2005 x4972",
"website": "gross-overhead.info",
"company": {
"name": "Schulist - Mosciski",
"catchPhrase": "Persevering full-range instruction set",
"bs": "aggregate granular markets"
}
},
{
"id": "bd1b6a9b-0109-4cee-b99e-7cdbc349c74f",
"name": "Katrina White",
"username": "Kendall_Dickens38",
"email": "Eugenia_Tremblay@hotmail.com",
"address": {
"street": "Erin Stravenue",
"suite": 364,
"city": "Mohrburgh",
"zipcode": "05980-1651",
"geo": {
"lat": "-46.5121",
"lng": "-175.1111"
}
},
"phone": "370.257.3258",
"website": "caring-dick.info",
"company": {
"name": "Gerlach - Cole",
"catchPhrase": "Phased high-level success",
"bs": "optimize one-to-one e-business"
}
},
{
"id": "17fdec36-8272-4ea0-bc98-2c662fdc5b25",
"name": "Bernie Kris",
"username": "Demarcus77",
"email": "Dagmar60@yahoo.com",
"address": {
"street": "Mann Station",
"suite": 52390,
"city": "Buckchester",
"zipcode": "02740-2169",
"geo": {
"lat": "-46.6773",
"lng": "-127.7325"
}
},
"phone": "482.210.3255 x475",
"website": "vivacious-square.com",
"company": {
"name": "Sawayn, Bednar and Schiller",
"catchPhrase": "Monitored homogeneous policy",
"bs": "facilitate customized portals"
}
},
{
"id": "269595ac-79e6-4495-b081-c7fa549fda27",
"name": "Tyson Grant",
"username": "Joana.Herzog",
"email": "Leanne.OReilly12@yahoo.com",
"address": {
"street": "Shanelle Parkways",
"suite": 98221,
"city": "Heatherhaven",
"zipcode": "09135-1141",
"geo": {
"lat": "79.7740",
"lng": "-42.8676"
}
},
"phone": "754.633.8610",
"website": "favorable-wiretap.net",
"company": {
"name": "O'Reilly - Volkman",
"catchPhrase": "Open-architected scalable portal",
"bs": "maximize viral synergies"
}
},
{
"id": "aed04b77-8f50-431d-ae5b-a8bbc8c02064",
"name": "Joel Lakin",
"username": "Jalyn47",
"email": "Sarah48@hotmail.com",
"address": {
"street": "Mosciski Port",
"suite": 57706,
"city": "South Scot",
"zipcode": "04660",
"geo": {
"lat": "80.7431",
"lng": "-74.4013"
}
},
"phone": "(681) 345-3009 x905",
"website": "crooked-cluster.name",
"company": {
"name": "Sauer Group",
"catchPhrase": "Multi-tiered bi-directional knowledge user",
"bs": "engineer leading-edge experiences"
}
},
{
"id": "5d8a8ded-5611-44f8-b973-a7430a74ff65",
"name": "Devon Maggio",
"username": "Brady70",
"email": "Macey20@hotmail.com",
"address": {
"street": "Spencer Crescent",
"suite": 64614,
"city": "South Johnniefort",
"zipcode": "50786-7175",
"geo": {
"lat": "81.0121",
"lng": "9.0471"
}
},
"phone": "557.485.1932 x13897",
"website": "strict-anchovy.biz",
"company": {
"name": "Braun Inc",
"catchPhrase": "Polarised eco-centric toolset",
"bs": "drive global synergies"
}
},
{
"id": "f0f33792-8355-4918-b3a0-eba6134a2242",
"name": "Kendra Douglas",
"username": "Maxime_Cruickshank",
"email": "Leonor_Kutch32@gmail.com",
"address": {
"street": "Ulices Falls",
"suite": 45139,
"city": "Savannabury",
"zipcode": "16973-4337",
"geo": {
"lat": "83.8091",
"lng": "36.8205"
}
},
"phone": "(505) 919-0298 x963",
"website": "impassioned-leg.name",
"company": {
"name": "Gislason and Sons",
"catchPhrase": "Advanced non-volatile infrastructure",
"bs": "reinvent 24/7 technologies"
}
},
{
"id": "d86c8164-a417-4890-8034-1328656e2aac",
"name": "Xander Mosciski",
"username": "Elenora.Marvin",
"email": "Kassandra48@yahoo.com",
"address": {
"street": "Kuvalis Bypass",
"suite": 83153,
"city": "Lakeland",
"zipcode": "12748-8869",
"geo": {
"lat": "-49.7042",
"lng": "152.8783"
}
},
"phone": "(305) 327-4321 x5117",
"website": "unsung-bloom.org",
"company": {
"name": "Marks - Kreiger",
"catchPhrase": "Optimized clear-thinking framework",
"bs": "exploit cross-platform relationships"
}
},
{
"id": "fa5ed52c-41e3-47f7-9d4c-09a2cbae0062",
"name": "Ambrose Hansen",
"username": "Walton.Wunsch",
"email": "Alvah81@hotmail.com",
"address": {
"street": "Hudson Causeway",
"suite": 41956,
"city": "Howelltown",
"zipcode": "10313-1476",
"geo": {
"lat": "-53.7202",
"lng": "50.8132"
}
},
"phone": "1-587-565-0205 x198",
"website": "mammoth-injunction.org",
"company": {
"name": "Wyman, Schoen and Macejkovic",
"catchPhrase": "Persistent transitional budgetary management",
"bs": "deploy granular interfaces"
}
},
{
"id": "ef9520ed-8566-48cf-8510-715ce075ebb6",
"name": "Daniela Hane",
"username": "Major36",
"email": "Mittie.Crona@gmail.com",
"address": {
"street": "Terry Estate",
"suite": 28499,
"city": "East Nathanael",
"zipcode": "53649-5393",
"geo": {
"lat": "-57.0563",
"lng": "-150.8613"
}
},
"phone": "1-207-811-0478",
"website": "unimportant-player.com",
"company": {
"name": "Dach, Jenkins and Mitchell",
"catchPhrase": "Expanded clear-thinking protocol",
"bs": "syndicate virtual channels"
}
},
{
"id": "2e89ae1b-229d-44c9-9b54-be1ab8479fd1",
"name": "Morgan Ryan",
"username": "Jaime.Nolan8",
"email": "Elmira.Emard45@hotmail.com",
"address": {
"street": "Karli Mission",
"suite": 49827,
"city": "Lake Dennisport",
"zipcode": "76669-4132",
"geo": {
"lat": "17.1348",
"lng": "127.3677"
}
},
"phone": "927.781.7919 x1129",
"website": "upset-throne.org",
"company": {
"name": "Batz, Thompson and Fritsch",
"catchPhrase": "Realigned 5th generation help-desk",
"bs": "deliver interactive bandwidth"
}
},
{
"id": "902bbc1e-0078-4ef2-bff0-8c8eb2d26e6a",
"name": "Cecelia Schmidt",
"username": "Abbie.Hayes",
"email": "Brock74@hotmail.com",
"address": {
"street": "Toy Lodge",
"suite": 30741,
"city": "Gerlachborough",
"zipcode": "75059-3074",
"geo": {
"lat": "58.3576",
"lng": "109.5310"
}
},
"phone": "(335) 555-4619",
"website": "majestic-geometry.biz",
"company": {
"name": "Leuschke and Sons",
"catchPhrase": "Sharable intermediate solution",
"bs": "engineer enterprise convergence"
}
},
{
"id": "9a424520-51a4-4a60-94b4-f8d16c7bdcad",
"name": "Isabell Frami",
"username": "Santa_Stoltenberg",
"email": "Pedro.Kuhlman73@hotmail.com",
"address": {
"street": "Xzavier Heights",
"suite": 50228,
"city": "Ratkeland",
"zipcode": "28805",
"geo": {
"lat": "-32.0786",
"lng": "-144.7953"
}
},
"phone": "938-853-9148 x463",
"website": "considerate-unity.biz",
"company": {
"name": "Lesch and Sons",
"catchPhrase": "Multi-lateral transitional algorithm",
"bs": "cultivate seamless platforms"
}
},
{
"id": "ce52f1c8-e895-4df3-b78b-fb9863e391c9",
"name": "Simeon Rodriguez",
"username": "Bo97",
"email": "Jose_Wyman@hotmail.com",
"address": {
"street": "Vicky Rapids",
"suite": 79942,
"city": "North Jeanettestad",
"zipcode": "17628",
"geo": {
"lat": "53.3583",
"lng": "-171.3413"
}
},
"phone": "694.700.8663 x194",
"website": "honorable-stamp.com",
"company": {
"name": "Senger - Kunze",
"catchPhrase": "Ameliorated tertiary knowledge base",
"bs": "repurpose dynamic paradigms"
}
},
{
"id": "f048fd0f-8ff3-40c3-b7f5-ef31bfaa208e",
"name": "Kayla Wyman",
"username": "Bianka.Zulauf82",
"email": "Rossie53@yahoo.com",
"address": {
"street": "Bahringer Road",
"suite": 34420,
"city": "Kalichester",
"zipcode": "06553-6350",
"geo": {
"lat": "26.5963",
"lng": "117.0921"
}
},
"phone": "1-894-628-9803 x1608",
"website": "second-sprinkles.biz",
"company": {
"name": "Reilly, Hammes and Morar",
"catchPhrase": "Profit-focused multi-tasking ability",
"bs": "engineer mission-critical convergence"
}
},
{
"id": "82614b41-842f-4ab2-9f52-72cd74e6912a",
"name": "Lesly Armstrong",
"username": "Quinn9",
"email": "Ila_Bosco77@hotmail.com",
"address": {
"street": "Satterfield Spur",
"suite": 78037,
"city": "Homenickfurt",
"zipcode": "85457",
"geo": {
"lat": "84.8946",
"lng": "8.8029"
}
},
"phone": "(552) 267-1073",
"website": "massive-sparerib.net",
"company": {
"name": "Funk and Sons",
"catchPhrase": "Persistent transitional definition",
"bs": "maximize revolutionary portals"
}
},
{
"id": "b342dd20-033b-48c7-8bcb-a5082047b26f",
"name": "Porter Heathcote",
"username": "Nikko_Wyman",
"email": "Ludwig13@yahoo.com",
"address": {
"street": "Bailey Shoals",
"suite": 53545,
"city": "Wolffview",
"zipcode": "18025-7620",
"geo": {
"lat": "21.0766",
"lng": "-117.8512"
}
},
"phone": "(877) 896-1561 x2535",
"website": "pink-clockwork.info",
"company": {
"name": "Erdman Inc",
"catchPhrase": "Assimilated 24/7 help-desk",
"bs": "transition synergistic partnerships"
}
},
{
"id": "760e076f-e546-42fa-baf3-948e2d1c1db3",
"name": "Chaim Farrell",
"username": "Jean.Adams",
"email": "Fleta79@yahoo.com",
"address": {
"street": "Santina Landing",
"suite": 3346,
"city": "Opheliabury",
"zipcode": "92025-8310",
"geo": {
"lat": "59.3374",
"lng": "-46.1009"
}
},
"phone": "1-375-324-7155 x8090",
"website": "wrathful-snowman.info",
"company": {
"name": "Muller - Stoltenberg",
"catchPhrase": "Proactive bandwidth-monitored task-force",
"bs": "scale sexy models"
}
},
{
"id": "e40b27af-802f-4859-9c9b-0a6e040bceec",
"name": "Ruthe Tromp",
"username": "Isidro_Bernhard",
"email": "Connor.Kertzmann@hotmail.com",
"address": {
"street": "Torey Estates",
"suite": 65698,
"city": "East Domenicoburgh",
"zipcode": "88381",
"geo": {
"lat": "-15.5262",
"lng": "116.0286"
}
},
"phone": "210-376-5170",
"website": "warm-cyst.biz",
"company": {
"name": "Smith Inc",
"catchPhrase": "Multi-tiered methodical architecture",
"bs": "generate turn-key metrics"
}
},
{
"id": "f1cbfc19-5e3a-4870-84cf-b94fd414e4b5",
"name": "Fermin Johnson",
"username": "Fatima.Konopelski",
"email": "Dangelo73@gmail.com",
"address": {
"street": "Kaci Light",
"suite": 47173,
"city": "South Julioborough",
"zipcode": "66712",
"geo": {
"lat": "-9.2021",
"lng": "-106.3527"
}
},
"phone": "353.816.0394 x524",
"website": "earnest-oeuvre.info",
"company": {
"name": "Bartoletti, Beer and Zieme",
"catchPhrase": "Quality-focused upward-trending firmware",
"bs": "deliver rich systems"
}
},
{
"id": "072c4f8b-3a32-4d4d-93db-6229f96c5f04",
"name": "Jamaal Hermann",
"username": "Paula_OKeefe",
"email": "Cathrine.Carroll21@gmail.com",
"address": {
"street": "Green Meadows",
"suite": 4149,
"city": "Bartonberg",
"zipcode": "05712",
"geo": {
"lat": "37.7296",
"lng": "-158.6928"
}
},
"phone": "848.332.4883 x1995",
"website": "potable-koala.name",
"company": {
"name": "Aufderhar - Krajcik",
"catchPhrase": "Object-based well-modulated paradigm",
"bs": "evolve clicks-and-mortar content"
}
},
{
"id": "fd098a84-a8c0-4da1-a60a-498e578d5145",
"name": "Carmine Larkin",
"username": "Davin_Jaskolski",
"email": "Katharina51@gmail.com",
"address": {
"street": "Gutkowski Ranch",
"suite": 75884,
"city": "Bethesda",
"zipcode": "61312",
"geo": {
"lat": "-20.6970",
"lng": "20.0345"
}
},
"phone": "1-271-563-2316 x542",
"website": "chief-grasp.name",
"company": {
"name": "Kiehn - Runolfsdottir",
"catchPhrase": "Diverse secondary conglomeration",
"bs": "harness wireless infomediaries"
}
},
{
"id": "c480e9fc-ab8f-4794-8e81-9530a7cc27fe",
"name": "Stewart Corwin",
"username": "Geraldine_Hermann13",
"email": "Iliana.OReilly30@yahoo.com",
"address": {
"street": "Imani Mount",
"suite": 15748,
"city": "Jacobsonhaven",
"zipcode": "15207",
"geo": {
"lat": "74.0103",
"lng": "81.0975"
}
},
"phone": "(657) 447-7711",
"website": "poor-clogs.info",
"company": {
"name": "Swaniawski LLC",
"catchPhrase": "Front-line content-based initiative",
"bs": "maximize killer solutions"
}
},
{
"id": "d22d39c1-d18d-4779-8a53-4823b3ce73fc",
"name": "Joel Leuschke",
"username": "Cade_Parker",
"email": "Angelica71@hotmail.com",
"address": {
"street": "Koss Pass",
"suite": 32099,
"city": "East Honolulu",
"zipcode": "91317",
"geo": {
"lat": "4.0207",
"lng": "-43.8051"
}
},
"phone": "770-692-6524 x22965",
"website": "mindless-inclusion.biz",
"company": {
"name": "Wilkinson - Reichel",
"catchPhrase": "Business-focused content-based focus group",
"bs": "engineer global e-services"
}
}
][
{
"id": "910a3836-4190-49d3-b820-0b0e08977df4",
"name": "Cathryn Wyman",
"username": "Consuelo.Renner",
"email": "Emerson.Champlin90@gmail.com",
"address": {
"street": "Schneider Landing",
"suite": 29086,
"city": "Cruzfort",
"zipcode": "52046-9780",
"geo": {
"lat": "52.8262",
"lng": "-169.7025"
}
},
"phone": "1-254-397-8635 x3003",
"website": "serious-moustache.name",
"company": {
"name": "Bartoletti Inc",
"catchPhrase": "Enterprise-wide systemic attitude",
"bs": "maximize 24/7 infomediaries"
}
}
]