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": "3fb4e326-7b1f-43c3-8a24-5d8320aeb668",
"name": "Brenda Sawayn",
"username": "Katrine.Kohler",
"email": "Gerardo.Kassulke62@hotmail.com",
"address": {
"street": "Runolfsson Valleys",
"suite": 65638,
"city": "Plano",
"zipcode": "19384",
"geo": {
"lat": "87.8767",
"lng": "172.4941"
}
},
"phone": "624-557-0731 x05862",
"website": "irritating-core.com",
"company": {
"name": "Adams Inc",
"catchPhrase": "Ergonomic secondary function",
"bs": "syndicate customized communities"
}
},
{
"id": "8d07c272-4abb-4927-9f32-89c67b30f53f",
"name": "Emma Klocko",
"username": "Vallie93",
"email": "Blaze_Walter@gmail.com",
"address": {
"street": "Ezequiel Spring",
"suite": 17002,
"city": "Lake Xavier",
"zipcode": "79504",
"geo": {
"lat": "-53.6458",
"lng": "89.5970"
}
},
"phone": "224-371-5578",
"website": "amazing-swimming.name",
"company": {
"name": "Reichel, Beahan and Bogisich",
"catchPhrase": "Visionary motivating circuit",
"bs": "strategize value-added synergies"
}
},
{
"id": "a1c462f3-8d12-47a0-b7d6-f890a75c7f7c",
"name": "Frederik Cole",
"username": "Janice_Grant",
"email": "Davonte.Turcotte@yahoo.com",
"address": {
"street": "Rupert Estate",
"suite": 79828,
"city": "Crooksburgh",
"zipcode": "20166",
"geo": {
"lat": "-35.2796",
"lng": "83.0622"
}
},
"phone": "1-648-449-2536 x538",
"website": "intelligent-chatter.biz",
"company": {
"name": "Crona, Daniel and Jaskolski",
"catchPhrase": "Front-line dynamic internet solution",
"bs": "engage cutting-edge web-readiness"
}
},
{
"id": "de731845-048c-4d47-aee7-fc97aa04b96b",
"name": "Destini Legros",
"username": "Gertrude_Ruecker96",
"email": "Wilson_Kshlerin@gmail.com",
"address": {
"street": "Bins Forge",
"suite": 14002,
"city": "O'Harachester",
"zipcode": "90744-9323",
"geo": {
"lat": "1.0475",
"lng": "83.1643"
}
},
"phone": "1-595-729-0554",
"website": "talkative-pillar.biz",
"company": {
"name": "Schuppe Inc",
"catchPhrase": "Focused zero defect matrices",
"bs": "reintermediate plug-and-play eyeballs"
}
},
{
"id": "6b889abb-2d30-44a0-8d9e-1ae77ea1c429",
"name": "Neoma Wunsch",
"username": "Graciela60",
"email": "Madelynn.West29@yahoo.com",
"address": {
"street": "Urban Prairie",
"suite": 27128,
"city": "Swiftville",
"zipcode": "76464",
"geo": {
"lat": "-1.3284",
"lng": "-101.7147"
}
},
"phone": "675-941-6946 x2328",
"website": "whimsical-supplement.net",
"company": {
"name": "Feil LLC",
"catchPhrase": "Digitized reciprocal migration",
"bs": "engage customized architectures"
}
},
{
"id": "9f3351a9-dfe1-4ec0-a9a7-1f7a6416f5e0",
"name": "Bridgette Stracke",
"username": "Kevin_Bashirian80",
"email": "Crystal_Moen67@gmail.com",
"address": {
"street": "Darrion Mall",
"suite": 30109,
"city": "Reynoldstown",
"zipcode": "70117-0799",
"geo": {
"lat": "-48.4078",
"lng": "76.1741"
}
},
"phone": "791-432-4100 x6874",
"website": "harmonious-boss.net",
"company": {
"name": "Walter Inc",
"catchPhrase": "Ergonomic empowering hub",
"bs": "mesh granular action-items"
}
},
{
"id": "f87dde0a-3a24-4a4e-8af8-2bd60102cae6",
"name": "Renee Daniel",
"username": "Sunny46",
"email": "Eudora_Herzog@yahoo.com",
"address": {
"street": "Janessa Groves",
"suite": 48381,
"city": "Wittingtown",
"zipcode": "87902",
"geo": {
"lat": "53.4173",
"lng": "-137.7653"
}
},
"phone": "891.669.3560 x58642",
"website": "second-hand-construction.net",
"company": {
"name": "Wunsch, Morissette and Toy",
"catchPhrase": "Universal needs-based installation",
"bs": "embrace dot-com systems"
}
},
{
"id": "cc264b63-6ed0-4188-9f58-0fe4a8c3c372",
"name": "Loraine Nikolaus",
"username": "Stephanie_Christiansen90",
"email": "Alexandre35@hotmail.com",
"address": {
"street": "Prosacco Throughway",
"suite": 25596,
"city": "Loraville",
"zipcode": "69836",
"geo": {
"lat": "-39.5267",
"lng": "-138.8853"
}
},
"phone": "950-729-4692",
"website": "reckless-fig.name",
"company": {
"name": "Williamson, Skiles and Hessel",
"catchPhrase": "Object-based hybrid emulation",
"bs": "harness plug-and-play functionalities"
}
},
{
"id": "e9049cd1-6e9a-4686-a8f5-30dc814e0a2b",
"name": "Jovany Rath",
"username": "Ambrose_Bradtke",
"email": "Abe_Hamill12@hotmail.com",
"address": {
"street": "Hyman Ranch",
"suite": 63510,
"city": "Lake Marcelina",
"zipcode": "66804",
"geo": {
"lat": "68.9582",
"lng": "-45.0702"
}
},
"phone": "(553) 509-4455",
"website": "unwilling-balaclava.com",
"company": {
"name": "Schneider - Brakus",
"catchPhrase": "Universal fresh-thinking strategy",
"bs": "unleash collaborative markets"
}
},
{
"id": "afad8809-267d-42c2-ba76-5b76dc05d9b4",
"name": "Anna Jakubowski",
"username": "Retha_Kovacek77",
"email": "Jesse_Ernser99@gmail.com",
"address": {
"street": "Kris Vista",
"suite": 95106,
"city": "South Vernerborough",
"zipcode": "82302-3975",
"geo": {
"lat": "-12.3680",
"lng": "-104.4580"
}
},
"phone": "554-713-3826",
"website": "sniveling-terminology.org",
"company": {
"name": "Kerluke - Grimes",
"catchPhrase": "Monitored didactic protocol",
"bs": "empower impactful ROI"
}
},
{
"id": "24a54fe4-97c8-4e0d-8b8b-f61bb454644a",
"name": "Destany Hartmann",
"username": "Timmothy.Muller89",
"email": "Lilly.Keeling73@yahoo.com",
"address": {
"street": "Sanford Overpass",
"suite": 66446,
"city": "Koeppville",
"zipcode": "54506",
"geo": {
"lat": "67.7880",
"lng": "-129.7338"
}
},
"phone": "302.592.3475 x7978",
"website": "disgusting-fashion.info",
"company": {
"name": "Rohan and Sons",
"catchPhrase": "Networked empowering challenge",
"bs": "monetize synergistic interfaces"
}
},
{
"id": "f9fc0f89-663e-471a-875d-c60be7289454",
"name": "Alvena Stark",
"username": "Reuben69",
"email": "Tressie.Hoppe@hotmail.com",
"address": {
"street": "Hammes Mountains",
"suite": 39400,
"city": "Euless",
"zipcode": "29535",
"geo": {
"lat": "-36.2264",
"lng": "-75.5672"
}
},
"phone": "(702) 325-9887 x25737",
"website": "complete-building.org",
"company": {
"name": "Conn - Legros",
"catchPhrase": "Decentralized encompassing product",
"bs": "synthesize holistic models"
}
},
{
"id": "074726aa-d5b5-45e7-a1ff-b9fcc6eee23d",
"name": "Zelda Roberts",
"username": "Bette41",
"email": "Braulio17@yahoo.com",
"address": {
"street": "Jenkins Run",
"suite": 16246,
"city": "Lake Katelynn",
"zipcode": "38791",
"geo": {
"lat": "13.3899",
"lng": "-12.9267"
}
},
"phone": "654-522-0112 x365",
"website": "rare-tensor.name",
"company": {
"name": "Predovic Group",
"catchPhrase": "Assimilated empowering framework",
"bs": "grow best-of-breed e-services"
}
},
{
"id": "2b4313b9-79bc-4fed-a143-e384d7eb8177",
"name": "Elliott Jaskolski",
"username": "Abbigail_Dooley",
"email": "Clint.Gislason69@yahoo.com",
"address": {
"street": "McGlynn Fall",
"suite": 48598,
"city": "Alexanebury",
"zipcode": "33345",
"geo": {
"lat": "29.3180",
"lng": "137.1171"
}
},
"phone": "470-292-8409 x226",
"website": "unwitting-white.name",
"company": {
"name": "Sauer, Dickinson and Zemlak",
"catchPhrase": "De-engineered object-oriented encoding",
"bs": "streamline one-to-one initiatives"
}
},
{
"id": "a36f6f29-2c31-45a6-99fe-5c123392e399",
"name": "Stacey Barton",
"username": "Bennett_Swaniawski8",
"email": "Golda_Price@hotmail.com",
"address": {
"street": "Dahlia Mission",
"suite": 42405,
"city": "Lake Stephan",
"zipcode": "07185-2137",
"geo": {
"lat": "3.8006",
"lng": "144.7445"
}
},
"phone": "658.436.2598",
"website": "exalted-dock.name",
"company": {
"name": "Corwin - Turcotte",
"catchPhrase": "Organized fault-tolerant pricing structure",
"bs": "empower best-of-breed ROI"
}
},
{
"id": "75adf957-f91b-4f95-9f26-abf351bec039",
"name": "Pietro Bernier",
"username": "Berneice_Rippin69",
"email": "Kathryne.Moore@hotmail.com",
"address": {
"street": "Gibson Centers",
"suite": 24693,
"city": "Rancho Cucamonga",
"zipcode": "11801-5894",
"geo": {
"lat": "74.4059",
"lng": "96.9245"
}
},
"phone": "(797) 442-6789 x973",
"website": "affectionate-handsaw.net",
"company": {
"name": "Borer - Koelpin",
"catchPhrase": "Optimized impactful approach",
"bs": "repurpose clicks-and-mortar markets"
}
},
{
"id": "efd6a698-b71c-4fd7-b8b0-076c1f97e18b",
"name": "Damien Stokes",
"username": "Jennings28",
"email": "Salvatore11@hotmail.com",
"address": {
"street": "Alysha Lock",
"suite": 46910,
"city": "South Tylerton",
"zipcode": "14707",
"geo": {
"lat": "36.7782",
"lng": "139.1043"
}
},
"phone": "(985) 973-2218 x548",
"website": "several-clove.net",
"company": {
"name": "Weissnat Group",
"catchPhrase": "Object-based impactful projection",
"bs": "leverage wireless portals"
}
},
{
"id": "862a2455-5d2c-4676-ae65-85dbde28487a",
"name": "Niko Emard",
"username": "Marge.Harber",
"email": "Ilene.Stanton@hotmail.com",
"address": {
"street": "Corwin Grove",
"suite": 26842,
"city": "Carolynefort",
"zipcode": "94122-4819",
"geo": {
"lat": "78.0396",
"lng": "179.7889"
}
},
"phone": "498-409-3525 x37634",
"website": "moral-extent.org",
"company": {
"name": "Barton - Reilly",
"catchPhrase": "Customer-focused bifurcated capability",
"bs": "reinvent world-class paradigms"
}
},
{
"id": "c7c5eb83-d06e-497a-840f-2634708a29fb",
"name": "Jorge Kuhn",
"username": "Ken_Dach60",
"email": "Llewellyn.Williamson60@yahoo.com",
"address": {
"street": "Kovacek Brook",
"suite": 76942,
"city": "Lake Waldo",
"zipcode": "16588-5037",
"geo": {
"lat": "-48.8025",
"lng": "155.2022"
}
},
"phone": "913-547-1162",
"website": "aggravating-integrity.info",
"company": {
"name": "Bernhard - Gottlieb",
"catchPhrase": "Face to face attitude-oriented access",
"bs": "revolutionize B2C vortals"
}
},
{
"id": "20dd907d-3e4f-4376-a16b-0e9d749d21d1",
"name": "Brock Jacobson",
"username": "Charley.Gislason",
"email": "Osborne0@gmail.com",
"address": {
"street": "Jennyfer Club",
"suite": 9197,
"city": "Susannamouth",
"zipcode": "62882-5156",
"geo": {
"lat": "-81.5589",
"lng": "-109.2783"
}
},
"phone": "1-521-500-5335 x060",
"website": "light-female.net",
"company": {
"name": "Legros, Turner and Hartmann",
"catchPhrase": "Universal clear-thinking concept",
"bs": "drive value-added systems"
}
},
{
"id": "87df03bc-6195-45ea-867d-dd80474746a8",
"name": "Flossie Jacobi",
"username": "Josefina_Stiedemann",
"email": "Joany95@gmail.com",
"address": {
"street": "Cassin Dale",
"suite": 52349,
"city": "East Deondreland",
"zipcode": "23456-7090",
"geo": {
"lat": "-42.3600",
"lng": "-44.0315"
}
},
"phone": "719-653-4829",
"website": "stark-integer.biz",
"company": {
"name": "Reynolds Inc",
"catchPhrase": "Mandatory cohesive secured line",
"bs": "iterate transparent infrastructures"
}
},
{
"id": "c5010fdf-fd9d-49d9-8d97-050a019a4631",
"name": "Billie Zieme",
"username": "Ben.Mosciski16",
"email": "Josianne_Wilkinson@hotmail.com",
"address": {
"street": "Jones Corner",
"suite": 62221,
"city": "South Carissa",
"zipcode": "96728",
"geo": {
"lat": "-80.3361",
"lng": "-68.2865"
}
},
"phone": "869-693-2334 x347",
"website": "creative-pudding.biz",
"company": {
"name": "Hane LLC",
"catchPhrase": "Horizontal zero tolerance access",
"bs": "implement end-to-end eyeballs"
}
},
{
"id": "813c166c-cda7-4069-a010-8e33e98f1a17",
"name": "Marlin Mann",
"username": "Brooke.Blanda",
"email": "Priscilla7@gmail.com",
"address": {
"street": "Rau Estates",
"suite": 57179,
"city": "South Aiyana",
"zipcode": "15793-5605",
"geo": {
"lat": "87.3916",
"lng": "-21.3662"
}
},
"phone": "259-587-1042",
"website": "squeaky-artery.com",
"company": {
"name": "Beier LLC",
"catchPhrase": "Re-engineered tangible array",
"bs": "morph interactive action-items"
}
},
{
"id": "ece4ef56-ee6c-424b-bb29-dfeeb687de33",
"name": "Bertha Feil",
"username": "Lyda72",
"email": "Katrine_Mayer@hotmail.com",
"address": {
"street": "Terry Track",
"suite": 83664,
"city": "Bellevue",
"zipcode": "32016-5574",
"geo": {
"lat": "-71.2211",
"lng": "23.7752"
}
},
"phone": "801.308.4501 x24882",
"website": "warlike-knickers.info",
"company": {
"name": "Gaylord - Daniel",
"catchPhrase": "Object-based user-facing pricing structure",
"bs": "engage web-enabled niches"
}
},
{
"id": "8b73736a-ee0a-49e8-a1dc-d5a918880425",
"name": "Shanna Ebert",
"username": "Sylvan.Jones77",
"email": "Frances.Schmitt@yahoo.com",
"address": {
"street": "Bechtelar Heights",
"suite": 11,
"city": "Port Wileyville",
"zipcode": "29544-8970",
"geo": {
"lat": "36.3378",
"lng": "-147.6444"
}
},
"phone": "(788) 465-0554",
"website": "nautical-blind.org",
"company": {
"name": "Graham, Rutherford and Jacobs",
"catchPhrase": "Business-focused neutral forecast",
"bs": "strategize global schemas"
}
},
{
"id": "330015b1-ee56-42df-9a13-c43ca5503ed3",
"name": "Delia Kiehn",
"username": "Marion67",
"email": "Davonte93@hotmail.com",
"address": {
"street": "Luettgen Square",
"suite": 85572,
"city": "Stokesbury",
"zipcode": "20597",
"geo": {
"lat": "20.2755",
"lng": "86.6570"
}
},
"phone": "1-332-337-5301",
"website": "agitated-wont.com",
"company": {
"name": "Lueilwitz - Schmitt",
"catchPhrase": "Centralized bifurcated superstructure",
"bs": "iterate value-added supply-chains"
}
},
{
"id": "9491761b-2b76-410c-9306-568bed732da6",
"name": "Ewald Frami",
"username": "Vicente59",
"email": "Jennyfer.Crist46@yahoo.com",
"address": {
"street": "Feeney Common",
"suite": 24845,
"city": "East Tyrique",
"zipcode": "34060-7514",
"geo": {
"lat": "39.6454",
"lng": "152.5194"
}
},
"phone": "291-398-2636 x3920",
"website": "rotating-frog.net",
"company": {
"name": "Medhurst and Sons",
"catchPhrase": "Cross-platform mission-critical budgetary management",
"bs": "streamline back-end bandwidth"
}
},
{
"id": "3ffd295e-ee23-4bae-af2c-9dcb57852d6b",
"name": "Seth Hartmann",
"username": "Danial_Lakin21",
"email": "Alyson2@yahoo.com",
"address": {
"street": "Ewald Throughway",
"suite": 73212,
"city": "Willymouth",
"zipcode": "20748",
"geo": {
"lat": "35.3040",
"lng": "-175.0847"
}
},
"phone": "(607) 810-0605 x099",
"website": "nice-waistband.biz",
"company": {
"name": "Stoltenberg and Sons",
"catchPhrase": "Exclusive regional intranet",
"bs": "facilitate clicks-and-mortar paradigms"
}
},
{
"id": "aef0d036-bf79-4cdc-a03e-b5b6f8cadc0c",
"name": "Christopher Hills",
"username": "Shanny.Bartell33",
"email": "Russell66@gmail.com",
"address": {
"street": "Simonis Skyway",
"suite": 98353,
"city": "New Chester",
"zipcode": "82934-4485",
"geo": {
"lat": "-41.3652",
"lng": "-0.9213"
}
},
"phone": "410.668.4702 x54745",
"website": "useless-vegetable.com",
"company": {
"name": "Mueller - Considine",
"catchPhrase": "Upgradable hybrid policy",
"bs": "engineer clicks-and-mortar e-business"
}
},
{
"id": "ad5dacd7-2c4f-48a3-b33c-a342d962a5ae",
"name": "Mason Ebert",
"username": "Gladyce.Champlin",
"email": "Heath.Powlowski99@hotmail.com",
"address": {
"street": "Cordia Run",
"suite": 90789,
"city": "Shanahanview",
"zipcode": "68887",
"geo": {
"lat": "-51.9570",
"lng": "-42.9381"
}
},
"phone": "807-332-2975",
"website": "foolhardy-reconsideration.name",
"company": {
"name": "Maggio, O'Conner and Schuppe",
"catchPhrase": "Down-sized logistical extranet",
"bs": "drive sexy users"
}
}
][
{
"id": "de731845-048c-4d47-aee7-fc97aa04b96b",
"name": "Destini Legros",
"username": "Gertrude_Ruecker96",
"email": "Wilson_Kshlerin@gmail.com",
"address": {
"street": "Bins Forge",
"suite": 14002,
"city": "O'Harachester",
"zipcode": "90744-9323",
"geo": {
"lat": "1.0475",
"lng": "83.1643"
}
},
"phone": "1-595-729-0554",
"website": "talkative-pillar.biz",
"company": {
"name": "Schuppe Inc",
"catchPhrase": "Focused zero defect matrices",
"bs": "reintermediate plug-and-play eyeballs"
}
}
]