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": "53603e58-7cc7-4bd0-b518-e73df61a8830",
"name": "Brisa Rau",
"username": "Walker87",
"email": "Anthony.Stamm@hotmail.com",
"address": {
"street": "Lebsack Branch",
"suite": 11934,
"city": "Esmeraldahaven",
"zipcode": "60391-9363",
"geo": {
"lat": "49.4029",
"lng": "-26.2552"
}
},
"phone": "901-851-7000 x61703",
"website": "crowded-caribou.com",
"company": {
"name": "Stracke and Sons",
"catchPhrase": "Proactive heuristic hierarchy",
"bs": "mesh enterprise markets"
}
},
{
"id": "c49676b7-8c33-4c9e-ae82-adbc962b0b62",
"name": "Randal Willms",
"username": "Madonna_Kunde76",
"email": "Nia_Romaguera78@gmail.com",
"address": {
"street": "Breitenberg Route",
"suite": 63234,
"city": "North Haleyport",
"zipcode": "08772",
"geo": {
"lat": "86.6175",
"lng": "-160.7016"
}
},
"phone": "(963) 827-0676 x673",
"website": "piercing-molecule.name",
"company": {
"name": "Abshire - Ondricka",
"catchPhrase": "Multi-layered real-time middleware",
"bs": "architect distributed action-items"
}
},
{
"id": "2c88e6ca-da2b-46ff-b670-aa3825d0d00f",
"name": "Colleen Skiles",
"username": "Sage60",
"email": "Verda0@gmail.com",
"address": {
"street": "Jaylin Terrace",
"suite": 92253,
"city": "New Kendrashire",
"zipcode": "35774-4626",
"geo": {
"lat": "-43.4519",
"lng": "96.4761"
}
},
"phone": "1-993-609-2082 x204",
"website": "high-patience.net",
"company": {
"name": "Will - Paucek",
"catchPhrase": "Versatile 24/7 middleware",
"bs": "optimize end-to-end eyeballs"
}
},
{
"id": "f5126c75-5ac2-415e-9f39-e72f7e0aab2a",
"name": "Sabina Thiel",
"username": "Geraldine46",
"email": "Cleveland.Dibbert81@yahoo.com",
"address": {
"street": "Marisa Ville",
"suite": 12863,
"city": "Lake Columbuston",
"zipcode": "30594-7107",
"geo": {
"lat": "23.4956",
"lng": "53.4707"
}
},
"phone": "1-534-418-9648 x117",
"website": "cheap-hugger.info",
"company": {
"name": "Mayer, Fay and Von",
"catchPhrase": "Ameliorated 5th generation migration",
"bs": "extend web-enabled models"
}
},
{
"id": "44b97fe5-8bf0-4e85-996f-d111cb9b06ea",
"name": "Samantha Corkery",
"username": "Brent.Trantow",
"email": "Tiffany92@gmail.com",
"address": {
"street": "Georgianna Ports",
"suite": 36016,
"city": "South Oscarburgh",
"zipcode": "53167-9596",
"geo": {
"lat": "-25.9059",
"lng": "82.1193"
}
},
"phone": "422-298-4103 x20016",
"website": "nocturnal-holder.biz",
"company": {
"name": "Witting Group",
"catchPhrase": "Persevering bandwidth-monitored customer loyalty",
"bs": "reinvent virtual deliverables"
}
},
{
"id": "1e757dbb-2959-4dc5-abd1-d40746ceea52",
"name": "Rowena O'Reilly",
"username": "Yvonne.Pfannerstill",
"email": "Lisa.Turner64@gmail.com",
"address": {
"street": "Isidro Passage",
"suite": 25817,
"city": "Davis",
"zipcode": "56382",
"geo": {
"lat": "-77.1317",
"lng": "19.1709"
}
},
"phone": "1-610-644-9869 x238",
"website": "parched-bid.com",
"company": {
"name": "O'Connell, Will and Frami",
"catchPhrase": "Implemented dedicated orchestration",
"bs": "repurpose magnetic partnerships"
}
},
{
"id": "7a3c6f1a-06ab-44cd-af26-cb55f40f91cd",
"name": "Margie Rice",
"username": "Bell91",
"email": "Danial4@hotmail.com",
"address": {
"street": "Mills Road",
"suite": 45662,
"city": "Predovicmouth",
"zipcode": "81642",
"geo": {
"lat": "61.6606",
"lng": "-20.0161"
}
},
"phone": "(526) 357-8673 x23665",
"website": "dimwitted-prisoner.com",
"company": {
"name": "Hayes - Kiehn",
"catchPhrase": "Robust asynchronous help-desk",
"bs": "innovate virtual ROI"
}
},
{
"id": "81191448-01ff-4050-b6fb-e07128b2d53d",
"name": "Isaac Abshire",
"username": "Clement70",
"email": "Keagan.Koss7@hotmail.com",
"address": {
"street": "Hane Ridge",
"suite": 92671,
"city": "Suzanneshire",
"zipcode": "36474",
"geo": {
"lat": "-26.0865",
"lng": "-95.7570"
}
},
"phone": "1-545-995-9510 x8526",
"website": "happy-unity.com",
"company": {
"name": "Cormier LLC",
"catchPhrase": "Multi-layered systemic website",
"bs": "monetize robust solutions"
}
},
{
"id": "22494003-8e46-43eb-b58e-5b0aaf8814ef",
"name": "Meredith Beatty",
"username": "Winifred.Pollich",
"email": "Jarret_Sipes@yahoo.com",
"address": {
"street": "Effertz Run",
"suite": 5176,
"city": "Emardland",
"zipcode": "78937",
"geo": {
"lat": "-64.6391",
"lng": "155.0336"
}
},
"phone": "(626) 722-9204 x05181",
"website": "adored-gel.org",
"company": {
"name": "Nikolaus LLC",
"catchPhrase": "Expanded holistic challenge",
"bs": "aggregate dynamic bandwidth"
}
},
{
"id": "c0765289-b79b-479a-aec8-8f01f2830b72",
"name": "Myrtis Kuvalis",
"username": "Bud.Wilderman60",
"email": "Rocky_Little10@hotmail.com",
"address": {
"street": "Fay Locks",
"suite": 79067,
"city": "Beckerview",
"zipcode": "97664-5498",
"geo": {
"lat": "76.1294",
"lng": "9.9041"
}
},
"phone": "(266) 990-8150",
"website": "winged-piglet.info",
"company": {
"name": "Krajcik, Will and Langworth",
"catchPhrase": "Total foreground structure",
"bs": "recontextualize sticky networks"
}
},
{
"id": "c7508130-8e07-436c-9054-21c307e2c8cf",
"name": "Myrna Farrell",
"username": "Hassan_Braun",
"email": "Marlon4@gmail.com",
"address": {
"street": "Gislason Underpass",
"suite": 93891,
"city": "Vitashire",
"zipcode": "71008",
"geo": {
"lat": "-43.3873",
"lng": "134.9270"
}
},
"phone": "1-440-696-5047 x27849",
"website": "qualified-ringworm.name",
"company": {
"name": "Keebler - Beatty",
"catchPhrase": "Re-engineered well-modulated software",
"bs": "incubate collaborative content"
}
},
{
"id": "e37378be-b1ad-4478-be3e-e27d2299b80c",
"name": "Angie Brakus",
"username": "Solon_Lemke85",
"email": "Marianne.Zemlak@hotmail.com",
"address": {
"street": "Braden Street",
"suite": 72422,
"city": "South Vaughnside",
"zipcode": "59044",
"geo": {
"lat": "-57.8329",
"lng": "-134.7754"
}
},
"phone": "940.889.2878 x7201",
"website": "tangible-country.name",
"company": {
"name": "Koss Inc",
"catchPhrase": "Progressive eco-centric model",
"bs": "expedite cross-platform technologies"
}
},
{
"id": "d840108d-f947-4faf-8907-0ed361198cc0",
"name": "Jacynthe Parker",
"username": "Jacinthe_Walker",
"email": "Jodie_Russel56@yahoo.com",
"address": {
"street": "Horacio Crossroad",
"suite": 88501,
"city": "Port Amaniton",
"zipcode": "55957-7220",
"geo": {
"lat": "-26.1611",
"lng": "-42.0302"
}
},
"phone": "(929) 313-7707 x7401",
"website": "infinite-week.name",
"company": {
"name": "Labadie, Boyer and Boehm",
"catchPhrase": "Customizable multimedia adapter",
"bs": "unleash e-business mindshare"
}
},
{
"id": "271f6d37-73ba-4e76-afed-3dd614e89f2f",
"name": "August Bayer",
"username": "Emanuel_Wiegand21",
"email": "Eino43@gmail.com",
"address": {
"street": "Aufderhar Pines",
"suite": 79766,
"city": "South Bryce",
"zipcode": "81007",
"geo": {
"lat": "-37.0336",
"lng": "-9.3021"
}
},
"phone": "573-338-5442",
"website": "memorable-beaver.info",
"company": {
"name": "Gottlieb, Funk and Christiansen",
"catchPhrase": "Digitized asynchronous productivity",
"bs": "target innovative content"
}
},
{
"id": "14dc157b-1a0a-433b-acae-a478d38872f9",
"name": "Julian Ondricka",
"username": "Cleo82",
"email": "Asa_Windler@yahoo.com",
"address": {
"street": "Lorenzo Flat",
"suite": 65906,
"city": "New Felipefurt",
"zipcode": "50473",
"geo": {
"lat": "-19.4203",
"lng": "-78.4934"
}
},
"phone": "(997) 631-7191 x90691",
"website": "courageous-stealth.info",
"company": {
"name": "Harris Group",
"catchPhrase": "Reverse-engineered clear-thinking customer loyalty",
"bs": "transform B2C synergies"
}
},
{
"id": "33ad1a0f-0a98-4ca6-8c69-eefc515dfb44",
"name": "Ernest Kertzmann",
"username": "Stanford.Collier",
"email": "Kaycee_Kozey@yahoo.com",
"address": {
"street": "Lowe Place",
"suite": 76083,
"city": "Ursulafort",
"zipcode": "54774",
"geo": {
"lat": "-0.7951",
"lng": "-59.5063"
}
},
"phone": "546-273-9027 x171",
"website": "front-wiretap.name",
"company": {
"name": "Ferry - Gusikowski",
"catchPhrase": "Team-oriented multi-state superstructure",
"bs": "optimize viral communities"
}
},
{
"id": "71e232fa-c1e0-492d-b0d9-d1840a531188",
"name": "Freeda Fadel",
"username": "Hobart_Quitzon73",
"email": "Karley.Bartoletti@gmail.com",
"address": {
"street": "Cortez Wells",
"suite": 26707,
"city": "North Edwin",
"zipcode": "65630-2237",
"geo": {
"lat": "-31.3089",
"lng": "-129.7403"
}
},
"phone": "(258) 265-0207 x243",
"website": "superior-boutique.biz",
"company": {
"name": "Trantow, Littel and Stiedemann",
"catchPhrase": "Optimized demand-driven concept",
"bs": "redefine out-of-the-box solutions"
}
},
{
"id": "acca4531-bc44-4ae6-9b70-d1794f9745af",
"name": "Claire Kulas",
"username": "Torey.Senger48",
"email": "Sydnie74@hotmail.com",
"address": {
"street": "Schinner Islands",
"suite": 99112,
"city": "North Khalil",
"zipcode": "11999-4762",
"geo": {
"lat": "-29.9184",
"lng": "165.3765"
}
},
"phone": "1-408-879-9398",
"website": "miserable-bench.com",
"company": {
"name": "Schowalter - Harber",
"catchPhrase": "De-engineered local system engine",
"bs": "engineer web-enabled blockchains"
}
},
{
"id": "339c76f1-34d3-4389-a016-e0e69e77efde",
"name": "Adrian Homenick",
"username": "Demarcus_Barton",
"email": "Zander.Osinski@yahoo.com",
"address": {
"street": "Huel Canyon",
"suite": 24130,
"city": "Port Blanca",
"zipcode": "47465-6714",
"geo": {
"lat": "69.4043",
"lng": "144.0483"
}
},
"phone": "885.476.2778 x7525",
"website": "strong-soy.org",
"company": {
"name": "Nienow - Goldner",
"catchPhrase": "Universal fault-tolerant help-desk",
"bs": "enhance B2B bandwidth"
}
},
{
"id": "d56aaff0-4fcf-4f79-98cc-69f27d5e4672",
"name": "Cornell Connelly",
"username": "Maudie.Legros",
"email": "Casimir.Goldner59@gmail.com",
"address": {
"street": "Lacy Brooks",
"suite": 41095,
"city": "Lake Elinor",
"zipcode": "26090-8198",
"geo": {
"lat": "83.2919",
"lng": "-64.7787"
}
},
"phone": "1-548-231-1607",
"website": "comfortable-finding.biz",
"company": {
"name": "Turner Inc",
"catchPhrase": "Reverse-engineered solution-oriented local area network",
"bs": "productize compelling e-markets"
}
},
{
"id": "296c5c1f-a875-4211-b8a5-b29625098435",
"name": "Precious Hudson",
"username": "Stuart_Koelpin",
"email": "Nannie_Wisozk@yahoo.com",
"address": {
"street": "Carroll Port",
"suite": 20244,
"city": "New Randytown",
"zipcode": "46243",
"geo": {
"lat": "78.8949",
"lng": "-67.5275"
}
},
"phone": "1-628-490-2471 x0064",
"website": "warlike-codepage.name",
"company": {
"name": "Kub - Lynch",
"catchPhrase": "Fully-configurable 4th generation moderator",
"bs": "morph revolutionary users"
}
},
{
"id": "069a5adc-72f4-496f-aa1b-440bf0fa4a88",
"name": "Schuyler Hamill",
"username": "Jaqueline.Bernier",
"email": "Dariana_Labadie96@hotmail.com",
"address": {
"street": "Winston Crossing",
"suite": 17373,
"city": "Emmerichshire",
"zipcode": "54774-9676",
"geo": {
"lat": "-46.5060",
"lng": "-76.2874"
}
},
"phone": "251.705.5988 x79372",
"website": "pretty-iron.info",
"company": {
"name": "Witting - Prosacco",
"catchPhrase": "Digitized scalable time-frame",
"bs": "harness customized markets"
}
},
{
"id": "8adaf9f3-0850-4e2d-945e-1406fa106b73",
"name": "Karson Hane",
"username": "Jason_Glover",
"email": "Bianka_Satterfield@gmail.com",
"address": {
"street": "Herman View",
"suite": 76744,
"city": "Haagmouth",
"zipcode": "98041-0479",
"geo": {
"lat": "25.4761",
"lng": "64.6640"
}
},
"phone": "958-396-2633 x942",
"website": "demanding-twilight.org",
"company": {
"name": "Treutel - Klein",
"catchPhrase": "Adaptive contextually-based process improvement",
"bs": "architect user-centric paradigms"
}
},
{
"id": "d6f8fd12-4c1e-475d-84ad-53f1ac61b89e",
"name": "Rosina Senger",
"username": "Tyra_Kozey",
"email": "Katarina.Schiller48@yahoo.com",
"address": {
"street": "Orlo Isle",
"suite": 95965,
"city": "Darefurt",
"zipcode": "09141",
"geo": {
"lat": "39.8551",
"lng": "134.3962"
}
},
"phone": "1-351-554-2854 x496",
"website": "great-twist.org",
"company": {
"name": "Turner - Hand",
"catchPhrase": "Profound reciprocal concept",
"bs": "harness cross-media portals"
}
},
{
"id": "e44d0994-74b9-49f5-b2a9-e7f63b6f607f",
"name": "Clay Raynor",
"username": "Pinkie6",
"email": "Cooper72@hotmail.com",
"address": {
"street": "Mylene Place",
"suite": 96952,
"city": "Weissnatshire",
"zipcode": "64209-5295",
"geo": {
"lat": "-46.9467",
"lng": "79.9890"
}
},
"phone": "791-866-4940 x18606",
"website": "conscious-port.biz",
"company": {
"name": "Reynolds Inc",
"catchPhrase": "Seamless motivating hardware",
"bs": "leverage e-business infomediaries"
}
},
{
"id": "7f742a8b-86ff-4d9a-883d-d6f9212a84ae",
"name": "Hardy Wilkinson",
"username": "Kane.Trantow91",
"email": "Walter.Kuphal49@gmail.com",
"address": {
"street": "Dietrich Land",
"suite": 47674,
"city": "Schummfurt",
"zipcode": "43843-4298",
"geo": {
"lat": "-68.8275",
"lng": "-70.1723"
}
},
"phone": "722-790-3109",
"website": "damaged-tip.net",
"company": {
"name": "Koelpin and Sons",
"catchPhrase": "Visionary client-driven budgetary management",
"bs": "productize synergistic users"
}
},
{
"id": "d42532d9-534c-46a8-b74b-7760be9131fe",
"name": "Kailyn Kling",
"username": "Leann.Littel",
"email": "Romaine39@gmail.com",
"address": {
"street": "Rowe Stravenue",
"suite": 88122,
"city": "Willmsmouth",
"zipcode": "66672",
"geo": {
"lat": "85.1176",
"lng": "114.9560"
}
},
"phone": "737.254.2630",
"website": "surprised-property.org",
"company": {
"name": "Dietrich - Walter",
"catchPhrase": "Synergistic zero defect parallelism",
"bs": "evolve distributed convergence"
}
},
{
"id": "b4c045db-8a85-4e8b-8556-723585f16422",
"name": "Simeon Mitchell",
"username": "Lisandro.Schinner",
"email": "Angelo_Tillman94@gmail.com",
"address": {
"street": "Barbara Square",
"suite": 87782,
"city": "South Keeganmouth",
"zipcode": "11845",
"geo": {
"lat": "0.0285",
"lng": "157.9108"
}
},
"phone": "1-464-318-2435",
"website": "profitable-earnings.info",
"company": {
"name": "Goodwin Group",
"catchPhrase": "Organic foreground alliance",
"bs": "harness synergistic architectures"
}
},
{
"id": "4ca31393-d77e-43a7-9cb3-b724c25b3b32",
"name": "Tom Veum",
"username": "Layla54",
"email": "Evie70@yahoo.com",
"address": {
"street": "Swift Stravenue",
"suite": 20971,
"city": "Port Geovannytown",
"zipcode": "41360-8117",
"geo": {
"lat": "71.4674",
"lng": "-13.2260"
}
},
"phone": "626.622.8803",
"website": "dreary-calorie.net",
"company": {
"name": "Kuphal, Stanton and Huels",
"catchPhrase": "Organized executive artificial intelligence",
"bs": "morph rich convergence"
}
},
{
"id": "c8fb8801-b8bb-434d-ab6e-197c4ce5ecc9",
"name": "Icie Connelly",
"username": "Katlynn18",
"email": "Florine.Russel@hotmail.com",
"address": {
"street": "Stehr Square",
"suite": 37134,
"city": "Tedton",
"zipcode": "80422-3576",
"geo": {
"lat": "-30.9648",
"lng": "-6.9614"
}
},
"phone": "(889) 429-1474 x0734",
"website": "nifty-heart.name",
"company": {
"name": "Kshlerin and Sons",
"catchPhrase": "Profound multi-state capacity",
"bs": "aggregate collaborative infomediaries"
}
}
][
{
"id": "f5126c75-5ac2-415e-9f39-e72f7e0aab2a",
"name": "Sabina Thiel",
"username": "Geraldine46",
"email": "Cleveland.Dibbert81@yahoo.com",
"address": {
"street": "Marisa Ville",
"suite": 12863,
"city": "Lake Columbuston",
"zipcode": "30594-7107",
"geo": {
"lat": "23.4956",
"lng": "53.4707"
}
},
"phone": "1-534-418-9648 x117",
"website": "cheap-hugger.info",
"company": {
"name": "Mayer, Fay and Von",
"catchPhrase": "Ameliorated 5th generation migration",
"bs": "extend web-enabled models"
}
}
]