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": "d51b5e9f-e55b-4faf-a06f-67ae27c070f5",
"name": "Jordy Brekke",
"username": "Sean81",
"email": "Marlon42@yahoo.com",
"address": {
"street": "Lenny Trafficway",
"suite": 45732,
"city": "South Joshuah",
"zipcode": "76511",
"geo": {
"lat": "5.4342",
"lng": "136.5583"
}
},
"phone": "1-836-671-0304 x696",
"website": "upset-legging.com",
"company": {
"name": "Abernathy Group",
"catchPhrase": "Seamless logistical attitude",
"bs": "innovate innovative eyeballs"
}
},
{
"id": "71d35f3d-5229-4c68-b969-51a545d9c5af",
"name": "Kamryn Mohr",
"username": "Mireille_Waelchi",
"email": "Micaela_Sporer84@hotmail.com",
"address": {
"street": "Zemlak Lodge",
"suite": 13074,
"city": "Pembroke Pines",
"zipcode": "34163-2098",
"geo": {
"lat": "-57.2155",
"lng": "52.1259"
}
},
"phone": "(639) 400-2754 x044",
"website": "agitated-spirituality.com",
"company": {
"name": "Quigley, McDermott and Hagenes",
"catchPhrase": "Quality-focused systematic data-warehouse",
"bs": "benchmark e-business ROI"
}
},
{
"id": "ed4e2ada-aed4-441f-b74b-eb4c536193ac",
"name": "Felton Bartell",
"username": "Jany_Metz23",
"email": "Oswald.Zulauf@yahoo.com",
"address": {
"street": "Chyna Pike",
"suite": 9189,
"city": "Alexandrebury",
"zipcode": "24334-1748",
"geo": {
"lat": "-31.2017",
"lng": "-175.6253"
}
},
"phone": "1-603-966-3372",
"website": "well-informed-deodorant.name",
"company": {
"name": "Gerlach LLC",
"catchPhrase": "Ergonomic web-enabled analyzer",
"bs": "e-enable frictionless metrics"
}
},
{
"id": "59f277b7-f4aa-476f-9b72-72a9dd4d8305",
"name": "Tad Glover",
"username": "Carolina24",
"email": "Dannie_Ryan@yahoo.com",
"address": {
"street": "Ziemann Lock",
"suite": 6912,
"city": "New Andrewstad",
"zipcode": "09803-6558",
"geo": {
"lat": "-80.7446",
"lng": "-171.3983"
}
},
"phone": "1-294-568-2090 x33067",
"website": "severe-strife.name",
"company": {
"name": "Carter, Mayer and Gerhold",
"catchPhrase": "Persistent web-enabled knowledge base",
"bs": "embrace distributed vortals"
}
},
{
"id": "5f66d8ab-87b4-461e-89d3-40e12b40542b",
"name": "Ephraim Gutkowski",
"username": "Roscoe_Metz46",
"email": "Verna_Kuhic78@hotmail.com",
"address": {
"street": "Homenick Ways",
"suite": 96669,
"city": "East Maddisonland",
"zipcode": "68898-2531",
"geo": {
"lat": "-17.0445",
"lng": "-28.8410"
}
},
"phone": "709-215-1755",
"website": "jealous-airspace.com",
"company": {
"name": "Crona LLC",
"catchPhrase": "Distributed bottom-line installation",
"bs": "reintermediate bleeding-edge models"
}
},
{
"id": "796d6b0b-7559-4a2b-b31a-7f9d73ed9651",
"name": "Eloy Kulas",
"username": "Cassie_Hessel20",
"email": "Adrienne_McClure90@gmail.com",
"address": {
"street": "Queen Extensions",
"suite": 69026,
"city": "North Hardy",
"zipcode": "13934",
"geo": {
"lat": "-80.1842",
"lng": "-79.8651"
}
},
"phone": "(962) 312-7090 x30045",
"website": "illegal-spouse.org",
"company": {
"name": "Reinger - Fritsch",
"catchPhrase": "Networked leading edge matrices",
"bs": "enable open-source infomediaries"
}
},
{
"id": "a4b87632-3de0-43ec-b9b8-9b4f612e2db9",
"name": "Pansy Glover",
"username": "Sydnee.Cruickshank",
"email": "Alvah22@hotmail.com",
"address": {
"street": "Kreiger Glens",
"suite": 26297,
"city": "Friesenburgh",
"zipcode": "75032",
"geo": {
"lat": "33.3704",
"lng": "-51.1138"
}
},
"phone": "(569) 852-7835 x227",
"website": "generous-temperature.name",
"company": {
"name": "Wolff, Bayer and Stokes",
"catchPhrase": "Self-enabling dedicated monitoring",
"bs": "exploit bleeding-edge action-items"
}
},
{
"id": "17c23eb6-62af-4af1-9bf7-0f52c4fe82a5",
"name": "Adriana Toy",
"username": "Keith.Nikolaus",
"email": "Fae_Torphy25@gmail.com",
"address": {
"street": "Otha Inlet",
"suite": 84320,
"city": "North Little Rock",
"zipcode": "64129",
"geo": {
"lat": "84.5490",
"lng": "-167.0028"
}
},
"phone": "1-401-652-4265 x399",
"website": "rubbery-smith.biz",
"company": {
"name": "Borer, Grady and Dicki",
"catchPhrase": "User-friendly national strategy",
"bs": "expedite end-to-end synergies"
}
},
{
"id": "62e273a8-ff0f-4224-8316-9284a429bbd9",
"name": "Toby Kshlerin",
"username": "Erna_Hettinger43",
"email": "Anjali_Grady@yahoo.com",
"address": {
"street": "Presley Run",
"suite": 42305,
"city": "Lillianstad",
"zipcode": "37774",
"geo": {
"lat": "10.8121",
"lng": "-133.4007"
}
},
"phone": "(880) 572-4451",
"website": "stark-closure.org",
"company": {
"name": "Kub and Sons",
"catchPhrase": "Polarised hybrid productivity",
"bs": "leverage killer partnerships"
}
},
{
"id": "214a4bad-adea-4f44-8ed1-ec0ae11da401",
"name": "Joyce Swift",
"username": "Nia_Boyle",
"email": "Issac.Wyman26@yahoo.com",
"address": {
"street": "Balistreri Manors",
"suite": 6975,
"city": "North Mozell",
"zipcode": "59452",
"geo": {
"lat": "-12.4682",
"lng": "-139.6358"
}
},
"phone": "1-769-632-8414 x42099",
"website": "sudden-accompanist.name",
"company": {
"name": "Hegmann Group",
"catchPhrase": "Managed dedicated installation",
"bs": "generate visionary e-tailers"
}
},
{
"id": "edb80421-57b2-4d84-91c0-507fd46116dc",
"name": "Easter Russel",
"username": "Valentine_West37",
"email": "Bria.Morar2@yahoo.com",
"address": {
"street": "Santino Trail",
"suite": 43714,
"city": "New Walker",
"zipcode": "73434-1002",
"geo": {
"lat": "-7.5628",
"lng": "27.1393"
}
},
"phone": "(425) 503-5412",
"website": "occasional-pigeon.org",
"company": {
"name": "Mayert Group",
"catchPhrase": "Decentralized reciprocal groupware",
"bs": "repurpose open-source experiences"
}
},
{
"id": "29304647-5b85-4021-a16e-247267e12bde",
"name": "Korbin Pfannerstill",
"username": "Chance_Altenwerth",
"email": "Susie.Dietrich@yahoo.com",
"address": {
"street": "Arne Place",
"suite": 34146,
"city": "Isaiasport",
"zipcode": "15284",
"geo": {
"lat": "-69.9004",
"lng": "7.5808"
}
},
"phone": "847.891.5510",
"website": "defiant-initialise.org",
"company": {
"name": "Wisoky, Medhurst and Schamberger",
"catchPhrase": "Synergized foreground projection",
"bs": "iterate virtual functionalities"
}
},
{
"id": "845cb55e-2e5a-4ab8-bdf0-d9373b5a0ca2",
"name": "Aiyana Kunze",
"username": "Itzel.Pagac",
"email": "Kathleen63@gmail.com",
"address": {
"street": "Lilyan Inlet",
"suite": 98528,
"city": "North Cassidy",
"zipcode": "23406-8365",
"geo": {
"lat": "88.2565",
"lng": "0.8111"
}
},
"phone": "(994) 212-0056",
"website": "smug-coach.net",
"company": {
"name": "Jerde, Schmeler and Schuppe",
"catchPhrase": "Implemented systemic workforce",
"bs": "integrate innovative e-business"
}
},
{
"id": "708b7ebf-5bbf-47a8-b9f9-48cf5415b66a",
"name": "Allan Roob",
"username": "Carli10",
"email": "Berenice_Little@gmail.com",
"address": {
"street": "Annabell Lane",
"suite": 50736,
"city": "South Broderickborough",
"zipcode": "61359",
"geo": {
"lat": "-5.7316",
"lng": "57.7471"
}
},
"phone": "1-376-405-1545 x2202",
"website": "slushy-drizzle.name",
"company": {
"name": "Quigley Group",
"catchPhrase": "Streamlined methodical access",
"bs": "strategize out-of-the-box e-tailers"
}
},
{
"id": "02341063-f9ab-4a69-9e8d-525e358526ba",
"name": "Burnice Dickens",
"username": "Emely26",
"email": "Archibald58@hotmail.com",
"address": {
"street": "Ernest Crossing",
"suite": 37948,
"city": "Valdosta",
"zipcode": "06877",
"geo": {
"lat": "70.2252",
"lng": "-34.2247"
}
},
"phone": "296-242-8026",
"website": "fearful-style.name",
"company": {
"name": "Kuphal, McLaughlin and Turner",
"catchPhrase": "Re-contextualized methodical middleware",
"bs": "e-enable ubiquitous markets"
}
},
{
"id": "bbdcf52c-9e73-49bd-a452-023f675df45f",
"name": "Adelia King",
"username": "Arielle36",
"email": "Hope.Zemlak@hotmail.com",
"address": {
"street": "Natalie Road",
"suite": 5020,
"city": "South Elva",
"zipcode": "46177",
"geo": {
"lat": "49.8805",
"lng": "161.5725"
}
},
"phone": "(936) 850-5113",
"website": "caring-piss.net",
"company": {
"name": "Nicolas - VonRueden",
"catchPhrase": "Multi-layered incremental software",
"bs": "redefine scalable paradigms"
}
},
{
"id": "af130918-9446-4178-8234-4c1053e0f252",
"name": "Dangelo Murazik",
"username": "Ernestine50",
"email": "Layne1@yahoo.com",
"address": {
"street": "Sadye Drive",
"suite": 56138,
"city": "Victoriashire",
"zipcode": "83217-0419",
"geo": {
"lat": "-49.3988",
"lng": "132.9310"
}
},
"phone": "(833) 272-1952 x73730",
"website": "great-paperback.info",
"company": {
"name": "Lueilwitz - Fisher",
"catchPhrase": "Multi-layered multimedia emulation",
"bs": "visualize intuitive e-markets"
}
},
{
"id": "e9abb4d7-2f2a-4db5-8a45-d80b73aa8eff",
"name": "Rafaela Graham",
"username": "Madalyn.Swift",
"email": "Marcella_Bernhard@hotmail.com",
"address": {
"street": "Hodkiewicz Ford",
"suite": 26708,
"city": "South Trudieport",
"zipcode": "36623",
"geo": {
"lat": "-77.8748",
"lng": "-63.9838"
}
},
"phone": "1-328-518-9410",
"website": "required-sonar.biz",
"company": {
"name": "Lueilwitz Inc",
"catchPhrase": "Cross-platform secondary moratorium",
"bs": "deliver granular interfaces"
}
},
{
"id": "e26facb4-6547-4cdd-85fa-2463e374c2a2",
"name": "Ladarius Stanton",
"username": "Emerald13",
"email": "Stacey36@gmail.com",
"address": {
"street": "Champlin Locks",
"suite": 15353,
"city": "Chandler",
"zipcode": "00136-8376",
"geo": {
"lat": "8.0962",
"lng": "-91.0601"
}
},
"phone": "464.212.2555",
"website": "definitive-vomit.name",
"company": {
"name": "Bechtelar - Swaniawski",
"catchPhrase": "Switchable methodical internet solution",
"bs": "reinvent granular solutions"
}
},
{
"id": "1c56005a-7239-4d26-8739-8940d04bb472",
"name": "Neil Schneider",
"username": "Norbert.Dickinson26",
"email": "Meggie.Schinner37@gmail.com",
"address": {
"street": "Gracie Estates",
"suite": 99402,
"city": "Walkerville",
"zipcode": "08497-4796",
"geo": {
"lat": "-60.0081",
"lng": "-155.8788"
}
},
"phone": "1-307-731-5464 x50567",
"website": "extra-large-sectional.org",
"company": {
"name": "Volkman - Tremblay",
"catchPhrase": "Innovative bottom-line service-desk",
"bs": "deliver holistic paradigms"
}
},
{
"id": "92dce7bd-eb96-4594-ac2c-a58e6cc589b3",
"name": "America Murazik",
"username": "Erica_Schneider",
"email": "Penelope_Schaden@yahoo.com",
"address": {
"street": "Declan Manors",
"suite": 39036,
"city": "Lake Rowenaberg",
"zipcode": "42725-3968",
"geo": {
"lat": "-81.1196",
"lng": "-27.7092"
}
},
"phone": "618-875-5845 x17704",
"website": "frightening-giraffe.com",
"company": {
"name": "Hackett and Sons",
"catchPhrase": "Extended national product",
"bs": "scale integrated e-services"
}
},
{
"id": "6e36fd23-8aee-428b-bb2c-15670943ca08",
"name": "Alexa Schmitt",
"username": "Jacey28",
"email": "Penelope50@hotmail.com",
"address": {
"street": "Schuppe Springs",
"suite": 10612,
"city": "Fatimaville",
"zipcode": "01289",
"geo": {
"lat": "-71.1438",
"lng": "-88.1829"
}
},
"phone": "1-737-617-5355 x322",
"website": "traumatic-movie.net",
"company": {
"name": "Mayert, Reilly and Ortiz",
"catchPhrase": "Compatible national orchestration",
"bs": "synergize robust bandwidth"
}
},
{
"id": "3b2f5308-16ab-48e8-b31e-90e440efcfe7",
"name": "Garrick Dickinson",
"username": "Cristopher.Willms",
"email": "Barry91@gmail.com",
"address": {
"street": "Lacey Shore",
"suite": 6313,
"city": "South Sharonmouth",
"zipcode": "29108-3245",
"geo": {
"lat": "4.2023",
"lng": "170.0489"
}
},
"phone": "1-945-418-6656 x3811",
"website": "second-spacing.info",
"company": {
"name": "Ziemann - Crist",
"catchPhrase": "Team-oriented maximized benchmark",
"bs": "exploit world-class bandwidth"
}
},
{
"id": "bd73c7fd-16a5-4f5d-9340-e451c2e2fab5",
"name": "Annie Conn",
"username": "Lelah.Dare72",
"email": "Paige_Harvey@gmail.com",
"address": {
"street": "Serena Path",
"suite": 84052,
"city": "Bartellberg",
"zipcode": "95095",
"geo": {
"lat": "45.1713",
"lng": "-41.5507"
}
},
"phone": "(817) 242-1325 x5820",
"website": "creamy-effector.net",
"company": {
"name": "Homenick - Mohr",
"catchPhrase": "Function-based asynchronous circuit",
"bs": "envisioneer efficient blockchains"
}
},
{
"id": "55b96fe7-d268-4a55-af85-247a4389ddfd",
"name": "Barrett Mueller",
"username": "Ayla83",
"email": "Monserrate2@gmail.com",
"address": {
"street": "Rocio Hollow",
"suite": 90641,
"city": "West Charlotteborough",
"zipcode": "38821-4238",
"geo": {
"lat": "33.8502",
"lng": "-91.9843"
}
},
"phone": "800-975-8282 x113",
"website": "responsible-century.org",
"company": {
"name": "Bergnaum Group",
"catchPhrase": "Fundamental user-facing contingency",
"bs": "embrace customized e-tailers"
}
},
{
"id": "e7646fdf-b643-4239-9e1e-176afb488bed",
"name": "Alene Frami",
"username": "Precious.Jast",
"email": "Virginie.Lynch2@hotmail.com",
"address": {
"street": "Gwendolyn Shoal",
"suite": 75467,
"city": "Lakewood",
"zipcode": "43147",
"geo": {
"lat": "-74.6121",
"lng": "-17.9722"
}
},
"phone": "(245) 725-7207 x854",
"website": "neighboring-iceberg.biz",
"company": {
"name": "Casper, Schuster and Smitham",
"catchPhrase": "Implemented motivating throughput",
"bs": "expedite virtual interfaces"
}
},
{
"id": "1f8647e8-e0be-4c35-9aef-577b977fc2fe",
"name": "Rowland Luettgen",
"username": "Janet62",
"email": "Dannie.Kulas64@yahoo.com",
"address": {
"street": "Schowalter Hill",
"suite": 73680,
"city": "South Jordonbury",
"zipcode": "18600-3385",
"geo": {
"lat": "77.3679",
"lng": "-93.4163"
}
},
"phone": "(475) 707-5631 x182",
"website": "cluttered-sanctuary.biz",
"company": {
"name": "Smitham - Collier",
"catchPhrase": "Cross-group radical middleware",
"bs": "morph out-of-the-box channels"
}
},
{
"id": "61a7e1b3-73a2-4fe3-9a5f-1e6c37ce2508",
"name": "Domingo Keebler",
"username": "Catharine_Jenkins",
"email": "Lacey_Armstrong87@yahoo.com",
"address": {
"street": "Maggie Plaza",
"suite": 30237,
"city": "Yvetteview",
"zipcode": "79794",
"geo": {
"lat": "30.5679",
"lng": "-156.7707"
}
},
"phone": "464-758-6794 x996",
"website": "meager-quarter.info",
"company": {
"name": "Watsica - McGlynn",
"catchPhrase": "Virtual exuding groupware",
"bs": "incubate dot-com web-readiness"
}
},
{
"id": "c672ddb2-1f42-40c3-bae6-7f27515c2aeb",
"name": "Lesley Bednar",
"username": "Octavia_Buckridge19",
"email": "Hipolito_Pouros91@gmail.com",
"address": {
"street": "Keaton Village",
"suite": 22837,
"city": "West Amani",
"zipcode": "18619",
"geo": {
"lat": "68.7221",
"lng": "92.5311"
}
},
"phone": "1-738-201-5681 x547",
"website": "submissive-frequency.biz",
"company": {
"name": "Kuvalis, Oberbrunner and Crona",
"catchPhrase": "Adaptive modular strategy",
"bs": "reintermediate user-centric action-items"
}
},
{
"id": "c736b0a0-edc3-4a49-973f-39e353a53736",
"name": "Michele Parker",
"username": "Christelle72",
"email": "Vella_Kunde54@hotmail.com",
"address": {
"street": "Elliott Vista",
"suite": 85504,
"city": "Gerardburgh",
"zipcode": "91445",
"geo": {
"lat": "-43.9467",
"lng": "-23.9543"
}
},
"phone": "(361) 443-1217 x581",
"website": "flaky-coaster.biz",
"company": {
"name": "Lueilwitz - Abshire",
"catchPhrase": "Cross-platform analyzing projection",
"bs": "transform mission-critical convergence"
}
}
][
{
"id": "59f277b7-f4aa-476f-9b72-72a9dd4d8305",
"name": "Tad Glover",
"username": "Carolina24",
"email": "Dannie_Ryan@yahoo.com",
"address": {
"street": "Ziemann Lock",
"suite": 6912,
"city": "New Andrewstad",
"zipcode": "09803-6558",
"geo": {
"lat": "-80.7446",
"lng": "-171.3983"
}
},
"phone": "1-294-568-2090 x33067",
"website": "severe-strife.name",
"company": {
"name": "Carter, Mayer and Gerhold",
"catchPhrase": "Persistent web-enabled knowledge base",
"bs": "embrace distributed vortals"
}
}
]