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": "904fa53b-69c6-4182-84f3-cea387cf072f",
"name": "Maximus Farrell",
"username": "Madisyn31",
"email": "Kari_Padberg@hotmail.com",
"address": {
"street": "Payton Alley",
"suite": 93143,
"city": "Kettering",
"zipcode": "19529",
"geo": {
"lat": "-80.3842",
"lng": "-86.8991"
}
},
"phone": "(458) 320-3615 x827",
"website": "thrifty-ownership.info",
"company": {
"name": "Tremblay, Wunsch and Hirthe",
"catchPhrase": "Operative maximized pricing structure",
"bs": "transition robust platforms"
}
},
{
"id": "e859843b-b62e-4703-b139-6acb019a93a2",
"name": "Jettie Little",
"username": "Wiley_Medhurst",
"email": "Crystal48@gmail.com",
"address": {
"street": "George Course",
"suite": 59484,
"city": "North Lauderdale",
"zipcode": "79602",
"geo": {
"lat": "85.3057",
"lng": "-17.0974"
}
},
"phone": "1-524-286-0189 x69945",
"website": "watchful-earring.info",
"company": {
"name": "Cruickshank - McCullough",
"catchPhrase": "Reactive heuristic infrastructure",
"bs": "maximize bleeding-edge infomediaries"
}
},
{
"id": "410de6c9-c1de-4f36-8e01-2d417e9328e5",
"name": "Rosalind O'Conner",
"username": "Jamaal.Stanton",
"email": "Cristina_Quitzon@gmail.com",
"address": {
"street": "Donna Lights",
"suite": 42989,
"city": "Little Rock",
"zipcode": "30187-5304",
"geo": {
"lat": "-21.1417",
"lng": "-17.6785"
}
},
"phone": "394.446.3661",
"website": "hard-anterior.com",
"company": {
"name": "Corwin, Pfeffer and Will",
"catchPhrase": "Function-based dedicated firmware",
"bs": "recontextualize user-centric users"
}
},
{
"id": "581ddb04-51a3-421a-8acd-15668a6973ca",
"name": "Derek Nienow",
"username": "Meaghan_Larson49",
"email": "Favian_Jacobi@hotmail.com",
"address": {
"street": "Jamel Ferry",
"suite": 38177,
"city": "North Skyla",
"zipcode": "06489-1705",
"geo": {
"lat": "51.0628",
"lng": "119.3041"
}
},
"phone": "(988) 975-2902 x2763",
"website": "wiry-division.net",
"company": {
"name": "Swaniawski - Gibson",
"catchPhrase": "Front-line local adapter",
"bs": "reintermediate real-time infomediaries"
}
},
{
"id": "c7765cbf-0cc5-4914-a80d-3a09995f5d2d",
"name": "Therese Littel",
"username": "Monserrat77",
"email": "Hilma.Krajcik65@gmail.com",
"address": {
"street": "Dashawn Crest",
"suite": 32969,
"city": "Millsville",
"zipcode": "93980-5260",
"geo": {
"lat": "-31.1186",
"lng": "1.5217"
}
},
"phone": "(315) 316-1357 x9483",
"website": "elliptical-instrumentation.net",
"company": {
"name": "Rowe - Cummerata",
"catchPhrase": "Compatible modular monitoring",
"bs": "generate customized channels"
}
},
{
"id": "cbdc8979-1bbb-41b7-b920-1ac9db974b08",
"name": "Eli MacGyver",
"username": "Melissa.Collins",
"email": "Domenic70@yahoo.com",
"address": {
"street": "Bart Squares",
"suite": 71482,
"city": "Christellehaven",
"zipcode": "68158",
"geo": {
"lat": "38.7485",
"lng": "79.8824"
}
},
"phone": "388.464.8618 x251",
"website": "dimpled-overview.net",
"company": {
"name": "Strosin Group",
"catchPhrase": "Profound empowering policy",
"bs": "mesh value-added communities"
}
},
{
"id": "464f87e7-4279-4187-aaa6-ffb3141f7597",
"name": "Durward Bernier",
"username": "Evert.Franey19",
"email": "Aubrey93@yahoo.com",
"address": {
"street": "Feest Mill",
"suite": 9570,
"city": "Shawnee",
"zipcode": "97293",
"geo": {
"lat": "8.4251",
"lng": "152.9421"
}
},
"phone": "654.217.2157",
"website": "favorite-fugato.biz",
"company": {
"name": "White - Crist",
"catchPhrase": "Profit-focused client-driven flexibility",
"bs": "productize customized e-commerce"
}
},
{
"id": "e47a44c3-03e4-4d93-b9da-248cfd7a7210",
"name": "Shania Ziemann",
"username": "Felicita70",
"email": "Devin.Koch46@yahoo.com",
"address": {
"street": "Tamara Prairie",
"suite": 5386,
"city": "Hollywood",
"zipcode": "52043",
"geo": {
"lat": "-41.9103",
"lng": "-172.3862"
}
},
"phone": "(506) 563-1642",
"website": "clean-inevitable.name",
"company": {
"name": "Mayer - Vandervort",
"catchPhrase": "Inverse explicit alliance",
"bs": "utilize intuitive methodologies"
}
},
{
"id": "31b5bdce-dbdf-4de0-8d9a-1e8f1cec70b1",
"name": "Joel Shanahan",
"username": "Ruthe0",
"email": "Fausto.Rodriguez@gmail.com",
"address": {
"street": "Florian Expressway",
"suite": 74920,
"city": "Normal",
"zipcode": "82615-9134",
"geo": {
"lat": "-4.5063",
"lng": "-7.9468"
}
},
"phone": "1-374-346-4587",
"website": "runny-width.biz",
"company": {
"name": "Baumbach Group",
"catchPhrase": "Expanded zero tolerance paradigm",
"bs": "productize killer models"
}
},
{
"id": "43b5b291-368b-4324-be7b-b4e8f7910766",
"name": "Moses Renner",
"username": "Rocio18",
"email": "Carleton68@gmail.com",
"address": {
"street": "Lizzie Stream",
"suite": 34673,
"city": "West Maryam",
"zipcode": "57180",
"geo": {
"lat": "-27.8806",
"lng": "132.7642"
}
},
"phone": "(681) 685-4593 x08217",
"website": "candid-demand.com",
"company": {
"name": "Keeling Inc",
"catchPhrase": "Customizable multi-state application",
"bs": "transition integrated action-items"
}
},
{
"id": "622cd960-817e-4079-a8a2-9fc00f1e5024",
"name": "Leland Wisozk",
"username": "Eliezer.Bernhard",
"email": "Burley.Spencer@hotmail.com",
"address": {
"street": "Rebeka Ridges",
"suite": 10885,
"city": "Lake Cristiantown",
"zipcode": "36470-1212",
"geo": {
"lat": "83.7026",
"lng": "41.0226"
}
},
"phone": "880.642.0667 x5731",
"website": "careless-right.name",
"company": {
"name": "Jenkins and Sons",
"catchPhrase": "Re-contextualized holistic policy",
"bs": "optimize seamless schemas"
}
},
{
"id": "acb89b1b-ab0d-4224-bf88-56c94e2b0cc8",
"name": "Helen Bruen",
"username": "Bennie_Rolfson55",
"email": "Shyanne_Rolfson@hotmail.com",
"address": {
"street": "Ruby Branch",
"suite": 5472,
"city": "East Katherinehaven",
"zipcode": "13015-0976",
"geo": {
"lat": "-53.0271",
"lng": "-38.9216"
}
},
"phone": "704.563.2956 x043",
"website": "smart-greenhouse.name",
"company": {
"name": "Gerlach, Legros and Barrows",
"catchPhrase": "Integrated static instruction set",
"bs": "streamline real-time systems"
}
},
{
"id": "676b6302-0aa1-4c69-96f5-feb269b93e52",
"name": "Leann Glover",
"username": "Devin_Crooks63",
"email": "Isadore53@hotmail.com",
"address": {
"street": "Jacobs Underpass",
"suite": 89011,
"city": "Reichelmouth",
"zipcode": "38749",
"geo": {
"lat": "42.1354",
"lng": "-148.3860"
}
},
"phone": "766.686.2248",
"website": "new-cop-out.com",
"company": {
"name": "Dare Group",
"catchPhrase": "Reduced homogeneous algorithm",
"bs": "leverage next-generation models"
}
},
{
"id": "256fc8fa-aa43-4260-85a4-460abed56511",
"name": "Chaz Schroeder",
"username": "Furman_Pollich",
"email": "Rigoberto.Dibbert@hotmail.com",
"address": {
"street": "Rafael Neck",
"suite": 85625,
"city": "Bryonview",
"zipcode": "62230",
"geo": {
"lat": "-6.7252",
"lng": "80.0806"
}
},
"phone": "638.307.3988 x50234",
"website": "stingy-occasion.info",
"company": {
"name": "Okuneva - Volkman",
"catchPhrase": "Cross-group client-driven software",
"bs": "unleash extensible e-commerce"
}
},
{
"id": "efd1ce5e-8f6f-4a88-a467-53e23b0c870c",
"name": "Flavie Marquardt",
"username": "Adrain_McKenzie",
"email": "Rosalinda_Christiansen@hotmail.com",
"address": {
"street": "Prohaska Course",
"suite": 28410,
"city": "New Imaville",
"zipcode": "19764",
"geo": {
"lat": "69.1983",
"lng": "29.1041"
}
},
"phone": "(236) 852-9005 x905",
"website": "previous-ruffle.name",
"company": {
"name": "Bins - O'Kon",
"catchPhrase": "Compatible disintermediate time-frame",
"bs": "recontextualize best-of-breed architectures"
}
},
{
"id": "994305e8-28fc-4b0f-accb-6589a284878f",
"name": "Lilly Feeney",
"username": "Ettie60",
"email": "Rita.Schmidt28@hotmail.com",
"address": {
"street": "Sporer Place",
"suite": 91016,
"city": "Pfefferborough",
"zipcode": "65437",
"geo": {
"lat": "-70.1359",
"lng": "-178.3842"
}
},
"phone": "930.589.3454 x30195",
"website": "high-horror.info",
"company": {
"name": "Rosenbaum - Bernier",
"catchPhrase": "Reverse-engineered context-sensitive projection",
"bs": "integrate front-end supply-chains"
}
},
{
"id": "27a115fb-4bac-42a5-8d99-75b7cd1213ca",
"name": "Trisha Walker",
"username": "Elton43",
"email": "Cyrus30@hotmail.com",
"address": {
"street": "Bosco Key",
"suite": 56848,
"city": "North Ellis",
"zipcode": "93879-4704",
"geo": {
"lat": "-36.9095",
"lng": "70.4313"
}
},
"phone": "1-369-792-3138 x561",
"website": "gifted-remote.net",
"company": {
"name": "Terry, Cummings and Lockman",
"catchPhrase": "Universal reciprocal open architecture",
"bs": "productize dot-com applications"
}
},
{
"id": "939f93ce-eb43-4274-8dd8-75fa661d70f4",
"name": "Una Cassin",
"username": "Elisa.Smitham82",
"email": "August_Wolff@hotmail.com",
"address": {
"street": "Kuphal Extension",
"suite": 1434,
"city": "Cheektowaga",
"zipcode": "26628-1243",
"geo": {
"lat": "-22.0701",
"lng": "-63.4251"
}
},
"phone": "331-558-2876",
"website": "hard-accomplishment.net",
"company": {
"name": "Fahey, Stokes and Zieme",
"catchPhrase": "Reactive background archive",
"bs": "morph real-time models"
}
},
{
"id": "21237765-e3e7-4fb3-9674-dfa89d2df74d",
"name": "Reinhold Price",
"username": "Rogers44",
"email": "Ronny74@yahoo.com",
"address": {
"street": "Christiansen Place",
"suite": 4877,
"city": "West Kathryn",
"zipcode": "22357",
"geo": {
"lat": "-14.9553",
"lng": "-85.5645"
}
},
"phone": "1-570-559-0784 x51324",
"website": "grimy-lever.name",
"company": {
"name": "Leannon, Cronin and Kohler",
"catchPhrase": "Exclusive cohesive workforce",
"bs": "visualize holistic models"
}
},
{
"id": "7fdf2990-4baf-4d55-bf9d-b13058376b62",
"name": "Marjorie Fritsch",
"username": "Garrick.Schulist",
"email": "Evert_Rice93@hotmail.com",
"address": {
"street": "Emmerich Village",
"suite": 9103,
"city": "East Mitchellville",
"zipcode": "05056-0743",
"geo": {
"lat": "-7.7024",
"lng": "-18.5033"
}
},
"phone": "409.643.6223 x18320",
"website": "rubbery-pike.com",
"company": {
"name": "Friesen, Roob and Monahan",
"catchPhrase": "Operative 5th generation moderator",
"bs": "mesh customized models"
}
},
{
"id": "ec7e154d-8602-483e-b59e-2661cfcccfe0",
"name": "Coleman Harber",
"username": "Carey_Padberg6",
"email": "Nola.Mayert@yahoo.com",
"address": {
"street": "Sydni Plains",
"suite": 17469,
"city": "Port Easter",
"zipcode": "38352-9343",
"geo": {
"lat": "9.2574",
"lng": "51.2564"
}
},
"phone": "200-976-1903",
"website": "monumental-priest.org",
"company": {
"name": "Larson - Parker",
"catchPhrase": "Advanced stable leverage",
"bs": "harness strategic networks"
}
},
{
"id": "f524a251-18eb-448c-8306-f70a135ef0d9",
"name": "Furman Kuphal",
"username": "Carlee66",
"email": "Clementina45@gmail.com",
"address": {
"street": "Zulauf Lake",
"suite": 7436,
"city": "New Yessenia",
"zipcode": "70374",
"geo": {
"lat": "-52.2526",
"lng": "-117.7336"
}
},
"phone": "1-215-865-4439 x08376",
"website": "lone-dialogue.org",
"company": {
"name": "Fahey - Schaefer",
"catchPhrase": "Decentralized full-range policy",
"bs": "incubate impactful mindshare"
}
},
{
"id": "01c8d9ce-5e00-4089-8619-05aea05d0c13",
"name": "Libbie Johnston",
"username": "Fae.Jacobi65",
"email": "Claudine.Collier4@yahoo.com",
"address": {
"street": "Toney Passage",
"suite": 11592,
"city": "Haagburgh",
"zipcode": "54306-6139",
"geo": {
"lat": "-45.2222",
"lng": "-6.5481"
}
},
"phone": "263.341.0826 x5430",
"website": "ornery-corridor.com",
"company": {
"name": "Trantow, Quitzon and Hirthe",
"catchPhrase": "Profound directional emulation",
"bs": "synergize bleeding-edge models"
}
},
{
"id": "d4ab4104-7d3b-458b-b0fd-2fcc4a11da5b",
"name": "Tyson Metz",
"username": "Elinore99",
"email": "Noelia90@hotmail.com",
"address": {
"street": "Cale Brook",
"suite": 82893,
"city": "South Mossieberg",
"zipcode": "97110",
"geo": {
"lat": "-31.9533",
"lng": "-79.3197"
}
},
"phone": "(757) 580-9168 x0333",
"website": "honored-walk.info",
"company": {
"name": "Dooley, Blick and DuBuque",
"catchPhrase": "Balanced full-range toolset",
"bs": "transform compelling experiences"
}
},
{
"id": "2981cf78-e5be-43b3-bfa0-5118f9d21c26",
"name": "Rosario Stokes",
"username": "Israel.Romaguera91",
"email": "Harold89@gmail.com",
"address": {
"street": "Kertzmann Glen",
"suite": 55679,
"city": "Troyberg",
"zipcode": "25096",
"geo": {
"lat": "70.7838",
"lng": "-98.7614"
}
},
"phone": "799.664.3285 x72296",
"website": "stiff-tripod.com",
"company": {
"name": "Langworth, Schneider and Johns",
"catchPhrase": "Organic fault-tolerant process improvement",
"bs": "syndicate B2B portals"
}
},
{
"id": "cfcb6ae0-a460-4f3c-a9df-4f2dc9a6454c",
"name": "Berry Yundt",
"username": "Shany71",
"email": "Dario.Conn@hotmail.com",
"address": {
"street": "Aletha Loop",
"suite": 33164,
"city": "Priceland",
"zipcode": "27178",
"geo": {
"lat": "7.4072",
"lng": "7.3842"
}
},
"phone": "(577) 288-8030 x154",
"website": "klutzy-drawing.com",
"company": {
"name": "Ward - Littel",
"catchPhrase": "Devolved multimedia function",
"bs": "disintermediate transparent technologies"
}
},
{
"id": "b0bba77d-e697-43cb-8f08-0e989cd7701e",
"name": "Edmund O'Keefe",
"username": "Kade_Morissette",
"email": "Savion.Deckow@hotmail.com",
"address": {
"street": "Howe Freeway",
"suite": 926,
"city": "Littleton",
"zipcode": "91828-2147",
"geo": {
"lat": "-64.8936",
"lng": "88.1892"
}
},
"phone": "1-590-209-2284 x506",
"website": "famous-scientist.net",
"company": {
"name": "Rau Inc",
"catchPhrase": "Multi-lateral web-enabled neural-net",
"bs": "seize 24/365 infrastructures"
}
},
{
"id": "560e3269-9b14-44f2-90fa-915cca19f962",
"name": "Jazmyn Fay",
"username": "Deshaun_Russel",
"email": "Jaren.Wehner81@hotmail.com",
"address": {
"street": "Bridie Mill",
"suite": 59757,
"city": "Ryanbury",
"zipcode": "06943",
"geo": {
"lat": "-20.9545",
"lng": "170.0913"
}
},
"phone": "(804) 776-8644",
"website": "impassioned-walk.net",
"company": {
"name": "Morissette - Morissette",
"catchPhrase": "Front-line motivating data-warehouse",
"bs": "disintermediate B2B relationships"
}
},
{
"id": "d8c884db-6fbc-4425-b3a9-6730374649f3",
"name": "Litzy Hessel",
"username": "Stacy_Johns",
"email": "Maverick_Brakus86@gmail.com",
"address": {
"street": "Mauricio Shore",
"suite": 36363,
"city": "Catalina Foothills",
"zipcode": "28395",
"geo": {
"lat": "-87.0129",
"lng": "-28.5469"
}
},
"phone": "844-314-1503",
"website": "adorable-script.net",
"company": {
"name": "O'Reilly, Hilpert and Dietrich",
"catchPhrase": "Ameliorated interactive methodology",
"bs": "benchmark turn-key e-commerce"
}
},
{
"id": "243b85e3-00e3-4c39-beca-6fa49b73ab65",
"name": "Shakira Daniel",
"username": "Dandre29",
"email": "Carlie_Jerde67@yahoo.com",
"address": {
"street": "Smitham Passage",
"suite": 39712,
"city": "Friesenfort",
"zipcode": "42541",
"geo": {
"lat": "-17.5681",
"lng": "88.4551"
}
},
"phone": "356.773.8765 x58373",
"website": "double-eligibility.net",
"company": {
"name": "Graham - Kuphal",
"catchPhrase": "Networked needs-based help-desk",
"bs": "drive global platforms"
}
}
][
{
"id": "581ddb04-51a3-421a-8acd-15668a6973ca",
"name": "Derek Nienow",
"username": "Meaghan_Larson49",
"email": "Favian_Jacobi@hotmail.com",
"address": {
"street": "Jamel Ferry",
"suite": 38177,
"city": "North Skyla",
"zipcode": "06489-1705",
"geo": {
"lat": "51.0628",
"lng": "119.3041"
}
},
"phone": "(988) 975-2902 x2763",
"website": "wiry-division.net",
"company": {
"name": "Swaniawski - Gibson",
"catchPhrase": "Front-line local adapter",
"bs": "reintermediate real-time infomediaries"
}
}
]