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": "3f2dc653-e96d-4afa-9390-079c382bdbc3",
"name": "Napoleon Nicolas",
"username": "Hildegard2",
"email": "Tanya.Collins@hotmail.com",
"address": {
"street": "Miller Springs",
"suite": 19896,
"city": "South Abigale",
"zipcode": "12775",
"geo": {
"lat": "-57.9040",
"lng": "-111.7721"
}
},
"phone": "368-927-6248 x3174",
"website": "acidic-ejector.com",
"company": {
"name": "Funk - Schroeder",
"catchPhrase": "Decentralized asymmetric workforce",
"bs": "grow collaborative e-tailers"
}
},
{
"id": "85b25a9c-37c1-43d7-ae02-f9d33d982783",
"name": "Jovani Hoeger",
"username": "Christelle86",
"email": "Kenna47@yahoo.com",
"address": {
"street": "Rafaela Stream",
"suite": 12617,
"city": "Eleanoramouth",
"zipcode": "49233",
"geo": {
"lat": "4.7493",
"lng": "-19.1728"
}
},
"phone": "1-837-236-4749 x946",
"website": "prime-mankind.com",
"company": {
"name": "Spencer, Goldner and Bins",
"catchPhrase": "Intuitive client-server synergy",
"bs": "leverage synergistic systems"
}
},
{
"id": "27b4692e-06e6-4d1c-9cff-7c06b11d4f89",
"name": "Jade Crist",
"username": "Mariam82",
"email": "Jacynthe.Kris46@gmail.com",
"address": {
"street": "Romaguera Lock",
"suite": 12491,
"city": "Jacobsonhaven",
"zipcode": "72279-0184",
"geo": {
"lat": "-52.9759",
"lng": "-25.9694"
}
},
"phone": "1-385-974-8432",
"website": "interesting-validity.info",
"company": {
"name": "Macejkovic - Weimann",
"catchPhrase": "Ergonomic incremental moratorium",
"bs": "seize collaborative solutions"
}
},
{
"id": "d0fc7d8d-edde-4394-bff2-20e1cfc24e71",
"name": "Ron Beahan",
"username": "Jane.Kerluke",
"email": "Yolanda.Marks@yahoo.com",
"address": {
"street": "Myrna Ports",
"suite": 53201,
"city": "Port Lelia",
"zipcode": "46554-9896",
"geo": {
"lat": "-39.7931",
"lng": "-4.7990"
}
},
"phone": "306-644-4601 x747",
"website": "funny-vibrissae.net",
"company": {
"name": "Stark - Durgan",
"catchPhrase": "Switchable 24 hour synergy",
"bs": "extend B2C vortals"
}
},
{
"id": "d7cbbd0c-329b-42d6-afe2-553303b80590",
"name": "Darrel Ryan",
"username": "Juliet62",
"email": "Adela33@gmail.com",
"address": {
"street": "Hodkiewicz Stream",
"suite": 25548,
"city": "West Maverickport",
"zipcode": "04866-4831",
"geo": {
"lat": "56.6451",
"lng": "-142.7325"
}
},
"phone": "558.709.0758",
"website": "these-atom.com",
"company": {
"name": "Lind Inc",
"catchPhrase": "Vision-oriented 6th generation artificial intelligence",
"bs": "evolve impactful markets"
}
},
{
"id": "0732e5bc-a212-416c-b2bb-79da44fc3b0e",
"name": "Aliyah Lockman",
"username": "Sonny.Greenfelder48",
"email": "Jada75@yahoo.com",
"address": {
"street": "Wuckert Garden",
"suite": 91943,
"city": "Elishaville",
"zipcode": "37418",
"geo": {
"lat": "88.9913",
"lng": "-43.8664"
}
},
"phone": "1-340-902-9538 x111",
"website": "dazzling-summary.biz",
"company": {
"name": "O'Connell - Herzog",
"catchPhrase": "Open-source context-sensitive success",
"bs": "integrate bleeding-edge schemas"
}
},
{
"id": "e2169e7e-8b5c-49fa-acb9-23737cbf317f",
"name": "Pamela Nitzsche",
"username": "Katelyn88",
"email": "Deion_Yundt@yahoo.com",
"address": {
"street": "Boyd Mill",
"suite": 11481,
"city": "Concord",
"zipcode": "78902",
"geo": {
"lat": "-43.1669",
"lng": "137.8950"
}
},
"phone": "(501) 893-1576 x394",
"website": "unused-cria.info",
"company": {
"name": "Baumbach, Jacobs and Ward",
"catchPhrase": "Triple-buffered fault-tolerant initiative",
"bs": "iterate distributed schemas"
}
},
{
"id": "b2187a7f-07c0-40ef-b596-69a13b7cd3c9",
"name": "Lora Tromp",
"username": "Makenna3",
"email": "Ulices.Dare@hotmail.com",
"address": {
"street": "Ayla Parkway",
"suite": 72281,
"city": "North Trenton",
"zipcode": "54305-7988",
"geo": {
"lat": "81.4008",
"lng": "-120.3495"
}
},
"phone": "1-466-598-4071 x3722",
"website": "recent-meteor.info",
"company": {
"name": "Legros, Rohan and Walsh",
"catchPhrase": "Diverse fresh-thinking circuit",
"bs": "drive 24/7 niches"
}
},
{
"id": "979e304b-07a7-4915-a49b-8bb3a71646bb",
"name": "Thelma Wunsch",
"username": "Fausto47",
"email": "Arturo23@hotmail.com",
"address": {
"street": "Bud Well",
"suite": 53737,
"city": "Marshallburgh",
"zipcode": "86149",
"geo": {
"lat": "-82.7048",
"lng": "151.8212"
}
},
"phone": "1-809-610-6825",
"website": "reflecting-cube.com",
"company": {
"name": "Paucek LLC",
"catchPhrase": "Synchronised multimedia capability",
"bs": "exploit holistic infrastructures"
}
},
{
"id": "94df8e94-9729-41a3-bce3-b5fc4a825d1b",
"name": "Vincenza Robel",
"username": "Lolita_Kunde",
"email": "Foster_Senger@gmail.com",
"address": {
"street": "Greenfelder Camp",
"suite": 22365,
"city": "Port Karli",
"zipcode": "82411",
"geo": {
"lat": "26.1435",
"lng": "-123.6520"
}
},
"phone": "1-882-870-1777",
"website": "fair-wrinkle.com",
"company": {
"name": "Wolff, Sanford and Morissette",
"catchPhrase": "Up-sized holistic interface",
"bs": "reinvent user-centric users"
}
},
{
"id": "d08f1cc8-7302-4fac-ba37-47483026fe63",
"name": "Mortimer Collins",
"username": "Petra.McLaughlin12",
"email": "Elijah.Hegmann@gmail.com",
"address": {
"street": "Koss Knolls",
"suite": 47269,
"city": "Kaiaburgh",
"zipcode": "69632",
"geo": {
"lat": "70.5036",
"lng": "179.1964"
}
},
"phone": "1-883-250-4536",
"website": "full-compassionate.net",
"company": {
"name": "Boyer, Raynor and Satterfield",
"catchPhrase": "Programmable 24/7 internet solution",
"bs": "repurpose turn-key deliverables"
}
},
{
"id": "5f15a477-485b-41d0-8e95-d9bf74001dda",
"name": "Trevor Simonis",
"username": "Allie_Kuhn",
"email": "Candelario.Jast80@hotmail.com",
"address": {
"street": "German Mountain",
"suite": 429,
"city": "Boynton Beach",
"zipcode": "64657",
"geo": {
"lat": "-40.5212",
"lng": "-85.6597"
}
},
"phone": "479-267-7496",
"website": "feline-catalogue.org",
"company": {
"name": "Leffler, Jacobson and Schmeler",
"catchPhrase": "Front-line stable focus group",
"bs": "implement B2B convergence"
}
},
{
"id": "e3c38aed-fbfb-475d-b0f9-894b1b62cd52",
"name": "Waino Cassin",
"username": "Garret.Turner",
"email": "Nikita36@hotmail.com",
"address": {
"street": "Gottlieb Wall",
"suite": 98131,
"city": "Hassiemouth",
"zipcode": "22736",
"geo": {
"lat": "35.9306",
"lng": "49.5761"
}
},
"phone": "432.627.7582",
"website": "amusing-photodiode.net",
"company": {
"name": "Considine, Lebsack and Ferry",
"catchPhrase": "Sharable cohesive standardization",
"bs": "deliver sexy e-tailers"
}
},
{
"id": "d53dbc06-31e6-4d80-8407-65d78efe8b98",
"name": "Mackenzie McClure",
"username": "Jany64",
"email": "Amelie.Schuster11@hotmail.com",
"address": {
"street": "Bruen Inlet",
"suite": 20691,
"city": "South Lizahaven",
"zipcode": "52057",
"geo": {
"lat": "15.1719",
"lng": "-147.5360"
}
},
"phone": "(767) 282-9275 x2638",
"website": "virtual-glee.name",
"company": {
"name": "Treutel - Marquardt",
"catchPhrase": "Ergonomic web-enabled product",
"bs": "integrate collaborative web services"
}
},
{
"id": "dbb35196-4f00-4492-a977-ac07e9830410",
"name": "Alene Corkery",
"username": "Kieran5",
"email": "Immanuel_Zieme8@hotmail.com",
"address": {
"street": "Logan Fort",
"suite": 54926,
"city": "Jonesberg",
"zipcode": "90189-9421",
"geo": {
"lat": "61.4013",
"lng": "158.1907"
}
},
"phone": "547-473-9824",
"website": "moral-shred.org",
"company": {
"name": "Crist, Goyette and Schumm",
"catchPhrase": "Future-proofed bifurcated model",
"bs": "transition dynamic models"
}
},
{
"id": "608b1716-22f8-4b6b-ad3e-0bf20e705236",
"name": "Myrtie Skiles",
"username": "Caleb_Balistreri82",
"email": "Kaley_Hahn@yahoo.com",
"address": {
"street": "Koss Ports",
"suite": 95567,
"city": "Port Dannyfort",
"zipcode": "35238-5392",
"geo": {
"lat": "31.8962",
"lng": "30.4999"
}
},
"phone": "468-533-0175",
"website": "truthful-soliloquy.org",
"company": {
"name": "Hintz - Kihn",
"catchPhrase": "User-friendly radical policy",
"bs": "transform B2C eyeballs"
}
},
{
"id": "27091622-dc2e-4236-a7b8-f487697b5e3c",
"name": "Alva Koch",
"username": "Sylvan_Willms9",
"email": "Nedra55@hotmail.com",
"address": {
"street": "Kaitlyn Spur",
"suite": 47469,
"city": "Parkertown",
"zipcode": "31283",
"geo": {
"lat": "-23.6293",
"lng": "153.7563"
}
},
"phone": "438-524-9352",
"website": "quiet-rip.name",
"company": {
"name": "Mills - Stark",
"catchPhrase": "Progressive radical customer loyalty",
"bs": "disintermediate ubiquitous bandwidth"
}
},
{
"id": "f693fb0c-6b5f-45ee-8fd6-94a5ad858c41",
"name": "Octavia Powlowski",
"username": "Hans5",
"email": "Rosendo54@gmail.com",
"address": {
"street": "Hartmann Points",
"suite": 50174,
"city": "Winston-Salem",
"zipcode": "55536-4516",
"geo": {
"lat": "37.1165",
"lng": "19.6436"
}
},
"phone": "760.297.4610 x84617",
"website": "open-trace.name",
"company": {
"name": "Bins, Hettinger and Ledner",
"catchPhrase": "Up-sized explicit superstructure",
"bs": "incentivize sexy supply-chains"
}
},
{
"id": "769166b4-3e9c-458e-9547-2c3f1ff73725",
"name": "Ardella Cummerata",
"username": "Carolina.Grimes",
"email": "Elissa79@yahoo.com",
"address": {
"street": "Kuhic Mountains",
"suite": 78682,
"city": "East Tess",
"zipcode": "46117",
"geo": {
"lat": "-85.3742",
"lng": "69.7041"
}
},
"phone": "1-246-478-7181 x97059",
"website": "rash-allergist.info",
"company": {
"name": "Cruickshank - Lesch",
"catchPhrase": "Streamlined national middleware",
"bs": "reintermediate vertical web services"
}
},
{
"id": "c27e462b-e0c5-423e-8a5d-763af7d0ecbe",
"name": "Janae Bahringer",
"username": "Hans.Davis",
"email": "Shaylee.Weimann@gmail.com",
"address": {
"street": "Hilton Loaf",
"suite": 68394,
"city": "East Howell",
"zipcode": "80448",
"geo": {
"lat": "80.7187",
"lng": "-70.8724"
}
},
"phone": "476-224-7488 x897",
"website": "fake-mangle.name",
"company": {
"name": "Lueilwitz - Maggio",
"catchPhrase": "Object-based optimal open system",
"bs": "architect enterprise interfaces"
}
},
{
"id": "3d565d7f-8a3b-48d2-af8a-28798897dd40",
"name": "Anabel Homenick",
"username": "Arnold67",
"email": "Alexandria_Price@yahoo.com",
"address": {
"street": "Schmitt Brook",
"suite": 67820,
"city": "Port Liamfort",
"zipcode": "19459",
"geo": {
"lat": "24.7372",
"lng": "25.4898"
}
},
"phone": "731-339-7245 x5558",
"website": "affectionate-black.info",
"company": {
"name": "Nitzsche LLC",
"catchPhrase": "Configurable encompassing approach",
"bs": "benchmark cross-platform synergies"
}
},
{
"id": "5faaa91a-728a-4c3c-8df2-191d93eff5a8",
"name": "Meda Armstrong",
"username": "Ashleigh34",
"email": "Magdalen.Blanda@yahoo.com",
"address": {
"street": "Paxton Streets",
"suite": 61085,
"city": "North Christytown",
"zipcode": "23288",
"geo": {
"lat": "34.9030",
"lng": "152.5645"
}
},
"phone": "448.704.9804",
"website": "possible-leaker.com",
"company": {
"name": "Brown, Lang and Schumm",
"catchPhrase": "Re-engineered even-keeled intranet",
"bs": "extend bricks-and-clicks schemas"
}
},
{
"id": "d1b352a7-aee3-48f0-a6dd-95e09a59446e",
"name": "Winona Hauck",
"username": "Helene_Larkin",
"email": "Taylor_Hickle@yahoo.com",
"address": {
"street": "Hagenes Pine",
"suite": 12266,
"city": "Elsietown",
"zipcode": "38260",
"geo": {
"lat": "9.9703",
"lng": "77.5936"
}
},
"phone": "474-987-3782 x3654",
"website": "dreary-accusation.name",
"company": {
"name": "Monahan Inc",
"catchPhrase": "Profit-focused optimal architecture",
"bs": "synthesize one-to-one platforms"
}
},
{
"id": "fc6f6b14-b62a-46e1-b2bd-f8c3050e2537",
"name": "Yazmin Goldner",
"username": "Ashlee.Auer54",
"email": "Jettie.Schroeder88@gmail.com",
"address": {
"street": "Hamill Fork",
"suite": 87342,
"city": "Brookline",
"zipcode": "99596-2151",
"geo": {
"lat": "35.2895",
"lng": "105.8722"
}
},
"phone": "895-651-1217",
"website": "reasonable-writer.info",
"company": {
"name": "Keebler Inc",
"catchPhrase": "Virtual heuristic portal",
"bs": "reinvent one-to-one e-services"
}
},
{
"id": "214ae59c-9698-42d7-a47b-e43c51828f4e",
"name": "Rosa Bosco",
"username": "Ellis_Fritsch81",
"email": "Izaiah_Abbott87@hotmail.com",
"address": {
"street": "Keshawn Knolls",
"suite": 87185,
"city": "West Alisonstad",
"zipcode": "57553",
"geo": {
"lat": "65.1561",
"lng": "64.2397"
}
},
"phone": "422.840.6685 x040",
"website": "fearless-dolman.net",
"company": {
"name": "Hartmann, Gerhold and Becker",
"catchPhrase": "Innovative uniform utilisation",
"bs": "orchestrate value-added solutions"
}
},
{
"id": "3d6535fe-cd66-4b1c-bfb6-ac14774514f5",
"name": "Keegan Dickinson",
"username": "Dante12",
"email": "Stanford2@yahoo.com",
"address": {
"street": "Jedediah Haven",
"suite": 66845,
"city": "New Virginiebury",
"zipcode": "79711",
"geo": {
"lat": "72.0881",
"lng": "-94.4387"
}
},
"phone": "246.371.3491 x3166",
"website": "variable-dip.name",
"company": {
"name": "Kautzer, Lehner and Friesen",
"catchPhrase": "Profit-focused static success",
"bs": "strategize intuitive mindshare"
}
},
{
"id": "099ba1e5-350d-40c3-9637-77215ccff6cc",
"name": "Hazle Lockman",
"username": "Jacky87",
"email": "Kylee_Thompson@gmail.com",
"address": {
"street": "Stiedemann Ports",
"suite": 3639,
"city": "Reneehaven",
"zipcode": "64799-2942",
"geo": {
"lat": "-4.9632",
"lng": "154.2712"
}
},
"phone": "326.715.7737",
"website": "bountiful-batter.org",
"company": {
"name": "Dickinson - Bode",
"catchPhrase": "Stand-alone 4th generation archive",
"bs": "evolve bricks-and-clicks models"
}
},
{
"id": "2f33f801-2cba-4c68-abca-ec64a9c40ae3",
"name": "Aracely Quigley",
"username": "Adela_Bernier38",
"email": "Gust.Reichert53@gmail.com",
"address": {
"street": "Howell Ramp",
"suite": 98322,
"city": "Arlington",
"zipcode": "39648-4245",
"geo": {
"lat": "21.2729",
"lng": "135.7250"
}
},
"phone": "651-507-1218 x820",
"website": "gregarious-deficit.name",
"company": {
"name": "Torp - Zboncak",
"catchPhrase": "Object-based empowering task-force",
"bs": "iterate cross-media blockchains"
}
},
{
"id": "fb003aa1-a33f-4ac3-80a4-88ced874bc71",
"name": "Ova Moore",
"username": "Pink30",
"email": "Jalen63@gmail.com",
"address": {
"street": "Rod Green",
"suite": 41205,
"city": "Temple",
"zipcode": "90700-7411",
"geo": {
"lat": "-16.0388",
"lng": "86.8720"
}
},
"phone": "450.436.4460 x628",
"website": "all-hate.name",
"company": {
"name": "Wilkinson - Bayer",
"catchPhrase": "Switchable interactive product",
"bs": "exploit turn-key e-commerce"
}
},
{
"id": "a7a3ea0e-dc21-4995-aadf-2de3dcf44962",
"name": "Vella Wisoky",
"username": "Bailee20",
"email": "Hailee_Kuhlman@gmail.com",
"address": {
"street": "Niko Throughway",
"suite": 32895,
"city": "West Abnerfurt",
"zipcode": "70747",
"geo": {
"lat": "11.5256",
"lng": "92.4390"
}
},
"phone": "(914) 434-4380 x998",
"website": "reckless-testing.org",
"company": {
"name": "Stoltenberg and Sons",
"catchPhrase": "Integrated executive approach",
"bs": "matrix leading-edge initiatives"
}
}
][
{
"id": "d0fc7d8d-edde-4394-bff2-20e1cfc24e71",
"name": "Ron Beahan",
"username": "Jane.Kerluke",
"email": "Yolanda.Marks@yahoo.com",
"address": {
"street": "Myrna Ports",
"suite": 53201,
"city": "Port Lelia",
"zipcode": "46554-9896",
"geo": {
"lat": "-39.7931",
"lng": "-4.7990"
}
},
"phone": "306-644-4601 x747",
"website": "funny-vibrissae.net",
"company": {
"name": "Stark - Durgan",
"catchPhrase": "Switchable 24 hour synergy",
"bs": "extend B2C vortals"
}
}
]