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": "e42e38a6-8cf2-4663-9ef0-7f03af2a1576",
"name": "Dalton Bauch",
"username": "Mitchell.Gusikowski71",
"email": "Quentin.Kulas48@yahoo.com",
"address": {
"street": "Waelchi Harbors",
"suite": 29506,
"city": "North Jaydonland",
"zipcode": "10142-9494",
"geo": {
"lat": "-83.2246",
"lng": "-132.0205"
}
},
"phone": "1-399-944-1234 x86254",
"website": "masculine-shawl.info",
"company": {
"name": "Hermann - DuBuque",
"catchPhrase": "Quality-focused optimal interface",
"bs": "extend end-to-end initiatives"
}
},
{
"id": "7154282c-e41a-48bf-9181-548fe58f4a99",
"name": "Garret O'Conner",
"username": "Herta.Lubowitz30",
"email": "Isabel.Legros@gmail.com",
"address": {
"street": "Jerald Rapids",
"suite": 11125,
"city": "Thelmamouth",
"zipcode": "95950-5984",
"geo": {
"lat": "-68.0114",
"lng": "-166.4838"
}
},
"phone": "977.833.0370",
"website": "spotless-barber.info",
"company": {
"name": "Buckridge - Lemke",
"catchPhrase": "Decentralized logistical groupware",
"bs": "architect user-centric web-readiness"
}
},
{
"id": "6cdc1957-1fd9-4061-baad-785be26ac3e7",
"name": "Lucy Cummings",
"username": "Anibal.Langworth96",
"email": "Rose.Schulist47@hotmail.com",
"address": {
"street": "Kody Groves",
"suite": 46505,
"city": "Mount Pleasant",
"zipcode": "37568-4209",
"geo": {
"lat": "-59.6673",
"lng": "159.1517"
}
},
"phone": "1-470-209-3484 x36793",
"website": "vague-thong.name",
"company": {
"name": "Lesch, Parisian and Fahey",
"catchPhrase": "Business-focused high-level frame",
"bs": "incubate wireless mindshare"
}
},
{
"id": "b1de597f-58a1-4bd1-8ba4-88581fa8e3cb",
"name": "Giovanna Lockman",
"username": "Kaylie_Schumm",
"email": "Marion.Grant@gmail.com",
"address": {
"street": "Stoltenberg Parks",
"suite": 31472,
"city": "Smithfort",
"zipcode": "00759-0795",
"geo": {
"lat": "-25.2646",
"lng": "-171.4244"
}
},
"phone": "(524) 466-7147 x83762",
"website": "firm-integration.org",
"company": {
"name": "Paucek, Bernhard and Schuster",
"catchPhrase": "Multi-lateral client-server circuit",
"bs": "facilitate distributed blockchains"
}
},
{
"id": "0edca72b-326d-4290-8560-6e02c9abf119",
"name": "Mossie Roberts",
"username": "Emery34",
"email": "Eloisa.Terry@yahoo.com",
"address": {
"street": "Mossie Squares",
"suite": 27024,
"city": "East Kayley",
"zipcode": "21409",
"geo": {
"lat": "78.8425",
"lng": "-118.3051"
}
},
"phone": "1-413-714-8302 x47657",
"website": "far-off-terrorist.name",
"company": {
"name": "Kulas - Becker",
"catchPhrase": "Balanced secondary infrastructure",
"bs": "drive cross-media functionalities"
}
},
{
"id": "5563fdf9-3ef6-4cf7-bbea-73db2ef679c5",
"name": "Nicholaus Hoeger",
"username": "Nathanael_Hackett",
"email": "Kennedi_Emmerich@gmail.com",
"address": {
"street": "Jamison Grove",
"suite": 34738,
"city": "Harveyhaven",
"zipcode": "07524",
"geo": {
"lat": "-50.7460",
"lng": "-108.6793"
}
},
"phone": "(344) 882-9931",
"website": "pristine-testimony.org",
"company": {
"name": "Marquardt and Sons",
"catchPhrase": "Secured incremental frame",
"bs": "empower intuitive infrastructures"
}
},
{
"id": "35d7babb-1224-43fb-86be-8c02ffd178af",
"name": "Consuelo Greenholt",
"username": "Jacklyn.Schroeder60",
"email": "Dorcas46@gmail.com",
"address": {
"street": "Dach Fords",
"suite": 3599,
"city": "Highland",
"zipcode": "02729",
"geo": {
"lat": "81.1577",
"lng": "-161.1844"
}
},
"phone": "779-664-4466 x057",
"website": "haunting-couple.net",
"company": {
"name": "Yost, Johnston and Roberts",
"catchPhrase": "De-engineered next generation benchmark",
"bs": "deliver magnetic supply-chains"
}
},
{
"id": "86d0b79d-d22e-484c-a475-ac51ed410b62",
"name": "Lurline Huel",
"username": "Oscar25",
"email": "Wilford.Padberg92@yahoo.com",
"address": {
"street": "Doyle Land",
"suite": 17207,
"city": "Sashaberg",
"zipcode": "85513-9536",
"geo": {
"lat": "-74.5169",
"lng": "-167.0227"
}
},
"phone": "947.938.1409",
"website": "grubby-pelican.org",
"company": {
"name": "Willms, Blick and Swift",
"catchPhrase": "Synergized mobile initiative",
"bs": "whiteboard scalable communities"
}
},
{
"id": "bdbad46b-ef86-4fd9-922c-ac40ec1c8cd1",
"name": "Judge Kub",
"username": "Vernice.Goldner",
"email": "Reggie.Osinski41@gmail.com",
"address": {
"street": "Titus Harbor",
"suite": 72282,
"city": "Concepcionhaven",
"zipcode": "73070-0520",
"geo": {
"lat": "-37.6389",
"lng": "-72.2688"
}
},
"phone": "920.231.8536",
"website": "vengeful-artist.name",
"company": {
"name": "Haag Group",
"catchPhrase": "Fully-configurable mobile installation",
"bs": "evolve integrated web services"
}
},
{
"id": "c250b347-2f8c-47eb-b5f5-a9f65610579f",
"name": "Alphonso Franecki",
"username": "Alison46",
"email": "Neal0@hotmail.com",
"address": {
"street": "Bayer Crest",
"suite": 51007,
"city": "Schambergertown",
"zipcode": "99615-8588",
"geo": {
"lat": "-12.6024",
"lng": "-1.6086"
}
},
"phone": "904-892-8649 x420",
"website": "half-pork.com",
"company": {
"name": "Kshlerin Group",
"catchPhrase": "Persevering dynamic array",
"bs": "engineer efficient experiences"
}
},
{
"id": "594ceae3-61f4-40c3-aba5-4f23f8f380b1",
"name": "Jada Koelpin",
"username": "Beryl5",
"email": "Mabelle.Lockman@hotmail.com",
"address": {
"street": "Hilll Knolls",
"suite": 52308,
"city": "Pourosview",
"zipcode": "37582",
"geo": {
"lat": "-77.5737",
"lng": "55.6805"
}
},
"phone": "224.888.9885",
"website": "oblong-loafer.name",
"company": {
"name": "Stehr - VonRueden",
"catchPhrase": "Enhanced client-server projection",
"bs": "engage e-business infrastructures"
}
},
{
"id": "8456b9cc-527d-46bf-ae0a-00f39fd1f621",
"name": "Enola Ankunding",
"username": "Ibrahim.OHara76",
"email": "Nia81@hotmail.com",
"address": {
"street": "Hadley Meadow",
"suite": 24749,
"city": "Connland",
"zipcode": "66732-5151",
"geo": {
"lat": "72.1192",
"lng": "-46.7460"
}
},
"phone": "1-567-211-1170 x7516",
"website": "distant-omnivore.biz",
"company": {
"name": "Shields, Lindgren and Beier",
"catchPhrase": "Devolved motivating workforce",
"bs": "engineer distributed blockchains"
}
},
{
"id": "028cfb6e-7b2a-41e9-a669-ea874fa0d6bb",
"name": "Mina Mertz",
"username": "Emiliano_Boyer96",
"email": "Verla.Greenholt79@yahoo.com",
"address": {
"street": "Bessie Crossing",
"suite": 18352,
"city": "New Armandoview",
"zipcode": "41527-0103",
"geo": {
"lat": "85.9939",
"lng": "-88.2180"
}
},
"phone": "811-243-1916 x85145",
"website": "gigantic-dessert.org",
"company": {
"name": "Hahn - Schultz",
"catchPhrase": "Advanced foreground neural-net",
"bs": "morph distributed markets"
}
},
{
"id": "6a54196e-72f6-4af1-a700-e6f17fa62c2b",
"name": "Pablo Marvin",
"username": "Herbert_Rath",
"email": "Anjali41@yahoo.com",
"address": {
"street": "Feil Square",
"suite": 66182,
"city": "West Benton",
"zipcode": "49201",
"geo": {
"lat": "13.4100",
"lng": "-40.7868"
}
},
"phone": "830.301.2765",
"website": "gifted-sturgeon.biz",
"company": {
"name": "Greenholt and Sons",
"catchPhrase": "Switchable holistic contingency",
"bs": "disintermediate sticky bandwidth"
}
},
{
"id": "8bf4a2f5-1774-412a-b0ff-7e2e0600a371",
"name": "Trey Hahn",
"username": "Jeanne.Harvey90",
"email": "Keaton72@hotmail.com",
"address": {
"street": "Hailie Alley",
"suite": 59907,
"city": "Port Gordonbury",
"zipcode": "64504-2155",
"geo": {
"lat": "-43.0871",
"lng": "65.8348"
}
},
"phone": "289-336-9375 x812",
"website": "soupy-pride.biz",
"company": {
"name": "Roob, Jaskolski and Kulas",
"catchPhrase": "Synchronised foreground standardization",
"bs": "reintermediate e-business platforms"
}
},
{
"id": "bcc45983-4b88-4c1b-80a0-9524d20b6fa2",
"name": "Holly Flatley",
"username": "Sandrine_Brakus51",
"email": "Darrell75@gmail.com",
"address": {
"street": "Bechtelar Prairie",
"suite": 65880,
"city": "West Melody",
"zipcode": "42068",
"geo": {
"lat": "25.0708",
"lng": "123.4130"
}
},
"phone": "1-683-593-8011",
"website": "worthy-nit.name",
"company": {
"name": "Lang Inc",
"catchPhrase": "Business-focused dedicated artificial intelligence",
"bs": "seize compelling supply-chains"
}
},
{
"id": "c01d04b3-0f5e-4d08-bc55-ca8ba3970cf3",
"name": "Jaycee Ondricka",
"username": "Rosella.Mosciski",
"email": "Josie_Bernhard89@gmail.com",
"address": {
"street": "Bosco Canyon",
"suite": 27962,
"city": "McLaughlinland",
"zipcode": "67068-9703",
"geo": {
"lat": "67.8922",
"lng": "-156.5715"
}
},
"phone": "675.565.9010 x946",
"website": "plastic-snowflake.org",
"company": {
"name": "Sanford, Lind and Cummerata",
"catchPhrase": "Business-focused foreground challenge",
"bs": "recontextualize bleeding-edge ROI"
}
},
{
"id": "d9481cdf-79a1-4817-8daa-eab8aaf58296",
"name": "Lilly Hartmann",
"username": "Morris89",
"email": "Noemie72@hotmail.com",
"address": {
"street": "Ferne Orchard",
"suite": 92657,
"city": "Bernhardshire",
"zipcode": "96827",
"geo": {
"lat": "-23.7925",
"lng": "-101.7482"
}
},
"phone": "230-326-5651 x14124",
"website": "frizzy-extent.net",
"company": {
"name": "Franey, Feil and Howell",
"catchPhrase": "Cross-platform responsive model",
"bs": "envisioneer mission-critical communities"
}
},
{
"id": "f48a95a8-15bb-465d-b984-e3c2d415eff7",
"name": "Christa Emmerich",
"username": "Katrine_Wunsch71",
"email": "Evalyn.Dooley24@hotmail.com",
"address": {
"street": "Gertrude Walk",
"suite": 382,
"city": "Evieside",
"zipcode": "45059-0130",
"geo": {
"lat": "-45.1512",
"lng": "-95.7266"
}
},
"phone": "(484) 970-3048",
"website": "mysterious-society.name",
"company": {
"name": "Kunde LLC",
"catchPhrase": "Total non-volatile policy",
"bs": "cultivate compelling architectures"
}
},
{
"id": "35e5d672-eb2a-4bc4-ba54-70c0e60e3cf8",
"name": "Dexter Harris",
"username": "Junior_Keebler",
"email": "Elliott.Mueller92@yahoo.com",
"address": {
"street": "Audreanne Trail",
"suite": 20205,
"city": "Auerview",
"zipcode": "32856",
"geo": {
"lat": "-29.9142",
"lng": "83.4287"
}
},
"phone": "856.899.8984 x7828",
"website": "decisive-plug.net",
"company": {
"name": "Emard Group",
"catchPhrase": "Stand-alone radical concept",
"bs": "integrate dot-com platforms"
}
},
{
"id": "a8a821d1-abe9-4c9e-882a-f76b53be5d92",
"name": "Solon Davis",
"username": "Tre_Kreiger",
"email": "Emily_Cummerata@yahoo.com",
"address": {
"street": "Stanton Station",
"suite": 44181,
"city": "North Edwin",
"zipcode": "44118",
"geo": {
"lat": "-57.5439",
"lng": "39.4084"
}
},
"phone": "674-714-9661",
"website": "perky-ovary.net",
"company": {
"name": "Hayes Group",
"catchPhrase": "Right-sized optimal flexibility",
"bs": "deploy web-enabled e-business"
}
},
{
"id": "6182fb7b-771d-4958-904e-2f50a8a0afac",
"name": "Chet Stanton",
"username": "Kaitlyn.OReilly",
"email": "Vilma51@gmail.com",
"address": {
"street": "Buckridge Keys",
"suite": 91749,
"city": "New Vicente",
"zipcode": "28265",
"geo": {
"lat": "72.2817",
"lng": "49.3380"
}
},
"phone": "288-355-9436 x1521",
"website": "organic-lament.org",
"company": {
"name": "Kreiger LLC",
"catchPhrase": "Triple-buffered executive installation",
"bs": "leverage compelling bandwidth"
}
},
{
"id": "a4691b26-dc83-4a94-a0c1-d3f03bde3c3c",
"name": "Alexandria Bogisich",
"username": "Isac.Wintheiser31",
"email": "Janessa80@yahoo.com",
"address": {
"street": "Lebsack Inlet",
"suite": 20222,
"city": "Boport",
"zipcode": "03535",
"geo": {
"lat": "-83.7148",
"lng": "-148.8898"
}
},
"phone": "908.533.0200",
"website": "lean-broker.name",
"company": {
"name": "Shields - Ankunding",
"catchPhrase": "Implemented 24/7 matrices",
"bs": "leverage one-to-one interfaces"
}
},
{
"id": "20412096-0dc6-4597-afa2-a93b69c624f2",
"name": "Tomas Gusikowski",
"username": "Ayana.Altenwerth",
"email": "Ervin5@yahoo.com",
"address": {
"street": "White Turnpike",
"suite": 92679,
"city": "North Brionna",
"zipcode": "53742",
"geo": {
"lat": "-9.5723",
"lng": "-158.0809"
}
},
"phone": "414-258-4769 x7318",
"website": "confused-sentence.info",
"company": {
"name": "Schneider - Herman",
"catchPhrase": "Business-focused motivating flexibility",
"bs": "facilitate distributed methodologies"
}
},
{
"id": "850d6ebc-ae23-45e5-b4c5-f545d7da821f",
"name": "Enrique O'Hara",
"username": "Valentin.Hartmann49",
"email": "Celestino.Macejkovic80@yahoo.com",
"address": {
"street": "O'Kon Island",
"suite": 81346,
"city": "Port Alizefurt",
"zipcode": "58815",
"geo": {
"lat": "-0.6603",
"lng": "-61.5660"
}
},
"phone": "(255) 797-1225 x125",
"website": "frilly-wedge.net",
"company": {
"name": "Flatley Inc",
"catchPhrase": "Stand-alone interactive paradigm",
"bs": "matrix transparent eyeballs"
}
},
{
"id": "238e821b-a59b-424e-b999-41cbd7a79bb4",
"name": "Kendall Mraz",
"username": "Kailee.Lehner58",
"email": "Aric_Skiles50@yahoo.com",
"address": {
"street": "Lora Parkways",
"suite": 53213,
"city": "New Lydiaberg",
"zipcode": "39712-0045",
"geo": {
"lat": "-7.2297",
"lng": "-99.0628"
}
},
"phone": "(587) 959-0122",
"website": "bright-jelly.info",
"company": {
"name": "Breitenberg - Kuhn",
"catchPhrase": "Persevering mobile matrix",
"bs": "reinvent impactful e-commerce"
}
},
{
"id": "d8bf5383-2c80-4814-8c6f-614c4f135cf4",
"name": "Kennedi Monahan",
"username": "Patsy.Blanda2",
"email": "Helga.Upton@gmail.com",
"address": {
"street": "Tamara Keys",
"suite": 97313,
"city": "Beierside",
"zipcode": "61409",
"geo": {
"lat": "-52.8877",
"lng": "2.1623"
}
},
"phone": "241.952.7309 x56547",
"website": "tricky-spokesman.net",
"company": {
"name": "Hessel - Connelly",
"catchPhrase": "Open-architected regional groupware",
"bs": "monetize end-to-end architectures"
}
},
{
"id": "cf2858ff-5a25-40ce-a14a-43e3243e22d9",
"name": "Anika Rowe",
"username": "Sherman_Keeling85",
"email": "Troy13@hotmail.com",
"address": {
"street": "Rossie Crossroad",
"suite": 33964,
"city": "North Rogelio",
"zipcode": "40706-8074",
"geo": {
"lat": "-63.5722",
"lng": "-129.3273"
}
},
"phone": "1-672-825-3787",
"website": "naive-silly.net",
"company": {
"name": "Christiansen - Gutkowski",
"catchPhrase": "Configurable clear-thinking migration",
"bs": "maximize sticky paradigms"
}
},
{
"id": "60eb6854-9611-4e12-93ab-4b9a35e88ff6",
"name": "Antwon Botsford",
"username": "Gabe44",
"email": "Geovanni.Ferry16@hotmail.com",
"address": {
"street": "Leon Skyway",
"suite": 64040,
"city": "Lake Everardo",
"zipcode": "18540-6015",
"geo": {
"lat": "8.2894",
"lng": "-89.1674"
}
},
"phone": "(917) 219-9157",
"website": "grumpy-cough.name",
"company": {
"name": "Kohler Group",
"catchPhrase": "Networked 4th generation archive",
"bs": "transform clicks-and-mortar content"
}
},
{
"id": "ab0b0273-ef12-496b-86d0-45eeea8aea83",
"name": "Sammy Turcotte",
"username": "Buford83",
"email": "Arne31@yahoo.com",
"address": {
"street": "Isaias Cape",
"suite": 44101,
"city": "Kenyabury",
"zipcode": "72394-5936",
"geo": {
"lat": "33.0421",
"lng": "137.9808"
}
},
"phone": "(287) 543-7432",
"website": "joyful-enigma.name",
"company": {
"name": "Witting Group",
"catchPhrase": "Programmable system-worthy project",
"bs": "seize one-to-one architectures"
}
}
][
{
"id": "b1de597f-58a1-4bd1-8ba4-88581fa8e3cb",
"name": "Giovanna Lockman",
"username": "Kaylie_Schumm",
"email": "Marion.Grant@gmail.com",
"address": {
"street": "Stoltenberg Parks",
"suite": 31472,
"city": "Smithfort",
"zipcode": "00759-0795",
"geo": {
"lat": "-25.2646",
"lng": "-171.4244"
}
},
"phone": "(524) 466-7147 x83762",
"website": "firm-integration.org",
"company": {
"name": "Paucek, Bernhard and Schuster",
"catchPhrase": "Multi-lateral client-server circuit",
"bs": "facilitate distributed blockchains"
}
}
]