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
Custom color
Dropdown position
Dropdown Height:
Dropdown direction
Add placeholder:
Search by field:
Label field:
Value field:
[
{
"id": "711df8d1-1ba3-41cc-ac6f-fc914aabedb6",
"name": "Rosa Stiedemann",
"username": "Thurman10",
"email": "Cristopher_Christiansen69@gmail.com",
"address": {
"street": "Malcolm Prairie",
"suite": 78500,
"city": "Lolitamouth",
"zipcode": "81540-0172",
"geo": {
"lat": "-31.7738",
"lng": "-9.3539"
}
},
"phone": "544.945.2357 x9078",
"website": "grant.name",
"company": {
"name": "Rolfson Inc",
"catchPhrase": "Optional full-range internet solution",
"bs": "24/7 drive vortals"
}
},
{
"id": "44a7fe68-6720-4d0a-bfc8-1d67347b4964",
"name": "Constantin Schinner",
"username": "Pamela2",
"email": "Bert.Morissette79@yahoo.com",
"address": {
"street": "Kunze Freeway",
"suite": 25730,
"city": "North Parkerland",
"zipcode": "73317",
"geo": {
"lat": "17.4415",
"lng": "130.3191"
}
},
"phone": "1-022-238-1172 x75963",
"website": "carlos.biz",
"company": {
"name": "Smitham - Padberg",
"catchPhrase": "Multi-channelled homogeneous open system",
"bs": "turn-key aggregate niches"
}
},
{
"id": "6369dbc0-09cc-4c9b-b78a-73e2832033ab",
"name": "Lourdes Tillman",
"username": "Clint_Boyer",
"email": "Jaquelin6@hotmail.com",
"address": {
"street": "Freeman Expressway",
"suite": 63017,
"city": "Port Leann",
"zipcode": "10498-9639",
"geo": {
"lat": "-83.8741",
"lng": "67.3710"
}
},
"phone": "335.030.3270",
"website": "mustafa.com",
"company": {
"name": "Brekke - Steuber",
"catchPhrase": "Robust bandwidth-monitored open architecture",
"bs": "mission-critical benchmark eyeballs"
}
},
{
"id": "8cab4ab4-e356-4a40-8e26-ad788262aebd",
"name": "Rod Jaskolski",
"username": "Brenden_Orn73",
"email": "Kyle55@gmail.com",
"address": {
"street": "Sawayn Trafficway",
"suite": 56131,
"city": "East Skye",
"zipcode": "82725",
"geo": {
"lat": "-21.1167",
"lng": "-112.0492"
}
},
"phone": "840-965-1293",
"website": "muriel.net",
"company": {
"name": "Larkin - Mohr",
"catchPhrase": "Persistent interactive ability",
"bs": "front-end maximize deliverables"
}
},
{
"id": "7729315c-983d-4167-a9f7-103e23dc14ce",
"name": "Timmothy Stehr",
"username": "Brando.Okuneva57",
"email": "Pearlie90@gmail.com",
"address": {
"street": "Jessica Circles",
"suite": 80720,
"city": "Darentown",
"zipcode": "27344",
"geo": {
"lat": "-16.2629",
"lng": "178.3755"
}
},
"phone": "(881) 864-3140 x159",
"website": "brenna.biz",
"company": {
"name": "Bernhard, Satterfield and Sawayn",
"catchPhrase": "Total contextually-based alliance",
"bs": "dot-com brand content"
}
},
{
"id": "223db556-2cc6-4f5d-95be-7d6caf86ed5a",
"name": "Johann Schinner",
"username": "Billie75",
"email": "Reyes.Yost@hotmail.com",
"address": {
"street": "Kemmer Mountain",
"suite": 5422,
"city": "East Dorthyland",
"zipcode": "65469",
"geo": {
"lat": "-41.7869",
"lng": "87.7734"
}
},
"phone": "1-557-646-8768 x554",
"website": "rusty.com",
"company": {
"name": "Windler Group",
"catchPhrase": "Quality-focused zero defect interface",
"bs": "innovative leverage methodologies"
}
},
{
"id": "cf6d64db-d8bf-4817-a249-1a04110720c7",
"name": "Jayme Beer",
"username": "Bettye31",
"email": "Ashleigh_Heaney9@hotmail.com",
"address": {
"street": "Zboncak Ferry",
"suite": 62189,
"city": "East Lulu",
"zipcode": "67357-3084",
"geo": {
"lat": "32.2072",
"lng": "-154.0388"
}
},
"phone": "1-436-876-4962 x87462",
"website": "lillie.org",
"company": {
"name": "Schultz, Volkman and Mosciski",
"catchPhrase": "Digitized value-added info-mediaries",
"bs": "back-end repurpose infrastructures"
}
},
{
"id": "c6fed711-3ab5-42d3-80c8-788155a717e3",
"name": "Zetta Rolfson",
"username": "Murray0",
"email": "Aletha.McClure67@gmail.com",
"address": {
"street": "Paula Lodge",
"suite": 8632,
"city": "Marysefurt",
"zipcode": "91052-9003",
"geo": {
"lat": "-44.5196",
"lng": "-172.7760"
}
},
"phone": "879-554-3332",
"website": "lazaro.com",
"company": {
"name": "Keebler, Hilll and Spinka",
"catchPhrase": "Customer-focused fresh-thinking website",
"bs": "out-of-the-box mesh vortals"
}
},
{
"id": "2cdd323e-6f8c-4bf2-88e0-45399feae56a",
"name": "Shawna Zieme",
"username": "Margarete.Haag6",
"email": "Joaquin_Stiedemann@gmail.com",
"address": {
"street": "Bryon Knolls",
"suite": 98528,
"city": "Port Floy",
"zipcode": "64597-8474",
"geo": {
"lat": "-36.2507",
"lng": "56.8602"
}
},
"phone": "(706) 173-5219",
"website": "macy.name",
"company": {
"name": "Bartell Group",
"catchPhrase": "Progressive exuding standardization",
"bs": "customized incentivize mindshare"
}
},
{
"id": "228f5dad-080e-4668-8561-b68bea82fc55",
"name": "Magdalena Labadie",
"username": "Javon50",
"email": "Harvey4@gmail.com",
"address": {
"street": "Kessler Keys",
"suite": 20125,
"city": "Schusterhaven",
"zipcode": "30792-2329",
"geo": {
"lat": "-15.2680",
"lng": "88.2698"
}
},
"phone": "1-063-262-5770",
"website": "lura.com",
"company": {
"name": "Kuhic Inc",
"catchPhrase": "Customer-focused static groupware",
"bs": "one-to-one benchmark e-commerce"
}
},
{
"id": "6bf1e691-2646-4daa-8517-7fc180ac6d4f",
"name": "Micaela Ebert",
"username": "Adele.Greenfelder",
"email": "Stefan.Daugherty69@hotmail.com",
"address": {
"street": "DuBuque Mountain",
"suite": 40510,
"city": "Runtefort",
"zipcode": "16425",
"geo": {
"lat": "-85.6008",
"lng": "-128.3079"
}
},
"phone": "1-565-606-4087",
"website": "webster.net",
"company": {
"name": "Morar and Sons",
"catchPhrase": "Organized next generation product",
"bs": "next-generation morph applications"
}
},
{
"id": "32581e13-9282-4997-bf5d-f9628474f208",
"name": "Alberto McGlynn",
"username": "Hunter_Murray",
"email": "Alyce_Jenkins@gmail.com",
"address": {
"street": "Simonis Flats",
"suite": 28123,
"city": "Zboncakborough",
"zipcode": "52750",
"geo": {
"lat": "55.7435",
"lng": "146.6357"
}
},
"phone": "1-438-152-5352",
"website": "zoey.info",
"company": {
"name": "Bradtke, Franecki and Kilback",
"catchPhrase": "Operative bottom-line functionalities",
"bs": "granular syndicate users"
}
},
{
"id": "02509759-9e7e-46a0-85df-3aa9e9e0bb85",
"name": "Lester Pfannerstill",
"username": "Ora_Fadel",
"email": "Jaleel_Sporer56@yahoo.com",
"address": {
"street": "McDermott Lane",
"suite": 1779,
"city": "East Tina",
"zipcode": "19100",
"geo": {
"lat": "-42.2836",
"lng": "112.7057"
}
},
"phone": "077.280.0996",
"website": "mertie.org",
"company": {
"name": "Walter - Jaskolski",
"catchPhrase": "Business-focused stable project",
"bs": "global whiteboard ROI"
}
},
{
"id": "38613a13-56f4-47e4-8642-b20e556b128f",
"name": "Wade Ankunding",
"username": "Lou_Kessler",
"email": "Jose14@gmail.com",
"address": {
"street": "Williamson Valley",
"suite": 76527,
"city": "South Carmella",
"zipcode": "71024-3592",
"geo": {
"lat": "-38.2500",
"lng": "-100.9608"
}
},
"phone": "360-529-8264",
"website": "theodore.net",
"company": {
"name": "Bradtke - Bosco",
"catchPhrase": "Diverse global core",
"bs": "B2B envisioneer networks"
}
},
{
"id": "ac4fe120-c0d9-43ce-a068-6cb17d1bcf67",
"name": "Celestino Jerde",
"username": "Annabell.Wilkinson",
"email": "Sarah_Rosenbaum27@yahoo.com",
"address": {
"street": "Casper Parkways",
"suite": 57865,
"city": "South Mattfurt",
"zipcode": "41279-3114",
"geo": {
"lat": "-77.5288",
"lng": "56.9467"
}
},
"phone": "1-804-262-9451 x0271",
"website": "immanuel.net",
"company": {
"name": "Schowalter, Daugherty and Fisher",
"catchPhrase": "Expanded even-keeled structure",
"bs": "visionary engineer supply-chains"
}
},
{
"id": "82fcdc5c-53ee-42b7-91d8-cc6e6069e39e",
"name": "Juwan Morissette",
"username": "Edwin.DAmore14",
"email": "Elena41@hotmail.com",
"address": {
"street": "Connie Crossing",
"suite": 87447,
"city": "Lake Charlene",
"zipcode": "76355",
"geo": {
"lat": "45.7883",
"lng": "90.5907"
}
},
"phone": "510-771-5984 x312",
"website": "magnus.info",
"company": {
"name": "Huels - Bins",
"catchPhrase": "Multi-tiered grid-enabled forecast",
"bs": "sexy enhance paradigms"
}
},
{
"id": "86405e72-3529-4ace-829e-d11c647bdadd",
"name": "Leopold Morar",
"username": "Rahsaan_Eichmann",
"email": "Clinton_West@hotmail.com",
"address": {
"street": "Medhurst Light",
"suite": 99669,
"city": "Streichmouth",
"zipcode": "65136",
"geo": {
"lat": "14.9930",
"lng": "47.6384"
}
},
"phone": "994.166.8392 x11977",
"website": "kenton.net",
"company": {
"name": "Jacobi, Mayert and Boyer",
"catchPhrase": "Persevering exuding complexity",
"bs": "clicks-and-mortar visualize e-markets"
}
},
{
"id": "a4c60d3d-ca5a-4d22-b6a6-7712ea315c82",
"name": "Greyson Baumbach",
"username": "Kyle_Leffler71",
"email": "Henderson_Waters97@hotmail.com",
"address": {
"street": "Mraz Wall",
"suite": 98646,
"city": "North Murray",
"zipcode": "50488-6097",
"geo": {
"lat": "33.4199",
"lng": "18.0627"
}
},
"phone": "102.067.8647",
"website": "lamar.biz",
"company": {
"name": "Cronin, Stanton and Denesik",
"catchPhrase": "Cross-group clear-thinking moderator",
"bs": "scalable generate communities"
}
},
{
"id": "57dc96ad-6163-4114-9e1c-f56d386901b4",
"name": "Luther Dietrich",
"username": "Carli_Hauck",
"email": "Theo_Zboncak@hotmail.com",
"address": {
"street": "Hahn Parkway",
"suite": 62991,
"city": "South Jairostad",
"zipcode": "54557",
"geo": {
"lat": "-85.3908",
"lng": "-98.8190"
}
},
"phone": "294.458.3329 x4668",
"website": "maureen.biz",
"company": {
"name": "Langosh Group",
"catchPhrase": "Right-sized didactic success",
"bs": "transparent engage networks"
}
},
{
"id": "47b2ce1e-29c8-42bf-a533-372ebb437283",
"name": "Florian Kunze",
"username": "Queenie.Senger",
"email": "Lamar.Bruen57@hotmail.com",
"address": {
"street": "Kobe Road",
"suite": 85512,
"city": "North Melissa",
"zipcode": "10601-5524",
"geo": {
"lat": "23.0557",
"lng": "-170.2482"
}
},
"phone": "615-905-5033",
"website": "ursula.biz",
"company": {
"name": "Hegmann - Cormier",
"catchPhrase": "Persistent incremental functionalities",
"bs": "collaborative embrace channels"
}
},
{
"id": "2112b900-8df3-486f-8210-fa74325f3b70",
"name": "Amy Frami",
"username": "Jena_Hahn",
"email": "Arnaldo31@yahoo.com",
"address": {
"street": "Josephine Pine",
"suite": 66390,
"city": "Roderickstad",
"zipcode": "96057",
"geo": {
"lat": "-68.6579",
"lng": "-133.1730"
}
},
"phone": "(517) 072-6238 x246",
"website": "tyrese.org",
"company": {
"name": "Conroy - Koss",
"catchPhrase": "Quality-focused fault-tolerant system engine",
"bs": "B2C streamline channels"
}
},
{
"id": "a70358b8-ae5f-46cc-8797-6a7956b9d6bd",
"name": "Nicholas Graham",
"username": "Aliya66",
"email": "Emil72@yahoo.com",
"address": {
"street": "Graham Brook",
"suite": 34618,
"city": "New Dora",
"zipcode": "94314-4257",
"geo": {
"lat": "37.7649",
"lng": "-3.5634"
}
},
"phone": "1-674-985-2346 x10554",
"website": "karl.info",
"company": {
"name": "Ondricka - Weissnat",
"catchPhrase": "Multi-channelled actuating framework",
"bs": "holistic revolutionize models"
}
},
{
"id": "d8366554-7ab3-498b-ab3b-502a4bc4a5ca",
"name": "Rosalee Johnston",
"username": "Brendan_Beatty21",
"email": "Mariane_Kshlerin@gmail.com",
"address": {
"street": "Reagan Islands",
"suite": 13481,
"city": "Port Jordi",
"zipcode": "66366-4561",
"geo": {
"lat": "-63.1181",
"lng": "-55.8261"
}
},
"phone": "753.182.4724",
"website": "josephine.com",
"company": {
"name": "Kunze, Ziemann and Windler",
"catchPhrase": "Intuitive coherent architecture",
"bs": "clicks-and-mortar monetize ROI"
}
},
{
"id": "65e23a9a-12fb-4917-b779-a2390170309c",
"name": "Reed Lakin",
"username": "Jacky10",
"email": "Geovanny.Larkin@yahoo.com",
"address": {
"street": "Vincenzo Ferry",
"suite": 72048,
"city": "Fritschberg",
"zipcode": "38993-4306",
"geo": {
"lat": "15.9863",
"lng": "14.6236"
}
},
"phone": "081-825-7412 x8898",
"website": "monserrat.net",
"company": {
"name": "Stamm, Kuphal and Volkman",
"catchPhrase": "Switchable 6th generation internet solution",
"bs": "sticky grow bandwidth"
}
},
{
"id": "48256634-33b6-48e1-93fe-c7b33e7d5caf",
"name": "Jevon Greenfelder",
"username": "Moshe.Mosciski",
"email": "Cody20@yahoo.com",
"address": {
"street": "Clotilde Wells",
"suite": 55702,
"city": "Port Jerry",
"zipcode": "59486",
"geo": {
"lat": "51.1394",
"lng": "44.0487"
}
},
"phone": "847-965-6736",
"website": "alan.org",
"company": {
"name": "Jacobi - Stark",
"catchPhrase": "Optional optimal structure",
"bs": "sexy synthesize action-items"
}
},
{
"id": "e3f025ed-dfee-465d-966a-e4b3edbdbd6f",
"name": "Luz Rippin",
"username": "Noemie.Brekke90",
"email": "Selmer9@yahoo.com",
"address": {
"street": "Denesik Union",
"suite": 73622,
"city": "Neldabury",
"zipcode": "85465",
"geo": {
"lat": "48.5653",
"lng": "-75.6358"
}
},
"phone": "636-422-5041",
"website": "paula.org",
"company": {
"name": "Pagac - Ratke",
"catchPhrase": "User-centric systemic policy",
"bs": "ubiquitous expedite mindshare"
}
},
{
"id": "791929f5-3b0d-4431-a6ec-ec4270cdb1b0",
"name": "Gage Orn",
"username": "King.Kautzer",
"email": "Friedrich62@hotmail.com",
"address": {
"street": "Nikko Trail",
"suite": 1466,
"city": "South Amaliashire",
"zipcode": "34327",
"geo": {
"lat": "34.8168",
"lng": "60.5809"
}
},
"phone": "094.779.2775 x03178",
"website": "kennedi.org",
"company": {
"name": "Zieme LLC",
"catchPhrase": "Persistent demand-driven portal",
"bs": "integrated strategize metrics"
}
},
{
"id": "e051e88b-e3f8-4493-82c7-536eec02c907",
"name": "Eleazar Willms",
"username": "Bernardo68",
"email": "Carmel.Ward@gmail.com",
"address": {
"street": "Graham Courts",
"suite": 48724,
"city": "North Jarred",
"zipcode": "86214-1011",
"geo": {
"lat": "41.9810",
"lng": "-32.1261"
}
},
"phone": "1-334-168-8343 x9322",
"website": "nicholaus.com",
"company": {
"name": "Kessler - Pacocha",
"catchPhrase": "Operative even-keeled open system",
"bs": "back-end optimize e-tailers"
}
},
{
"id": "914dc9db-9ce7-48d6-a00b-988f962c78cc",
"name": "Katherine Doyle",
"username": "Virgil.Donnelly",
"email": "Katrina.Breitenberg67@hotmail.com",
"address": {
"street": "Hortense Ferry",
"suite": 73332,
"city": "Beattyborough",
"zipcode": "91239",
"geo": {
"lat": "85.0906",
"lng": "-16.3552"
}
},
"phone": "(370) 655-9062 x1516",
"website": "dandre.biz",
"company": {
"name": "Windler, Hickle and Stroman",
"catchPhrase": "Inverse system-worthy initiative",
"bs": "impactful synergize partnerships"
}
},
{
"id": "7614ab6f-7c6f-40dc-b1b6-8343bcfbcfe4",
"name": "Everett Nienow",
"username": "Ron.Hegmann",
"email": "Roxanne.Weissnat33@yahoo.com",
"address": {
"street": "Connelly Drives",
"suite": 99294,
"city": "West Jakobside",
"zipcode": "57855-4575",
"geo": {
"lat": "-67.8311",
"lng": "36.4594"
}
},
"phone": "1-950-267-1645",
"website": "velma.name",
"company": {
"name": "Goldner Group",
"catchPhrase": "Fully-configurable bifurcated workforce",
"bs": "plug-and-play benchmark mindshare"
}
}
][
{
"id": "8cab4ab4-e356-4a40-8e26-ad788262aebd",
"name": "Rod Jaskolski",
"username": "Brenden_Orn73",
"email": "Kyle55@gmail.com",
"address": {
"street": "Sawayn Trafficway",
"suite": 56131,
"city": "East Skye",
"zipcode": "82725",
"geo": {
"lat": "-21.1167",
"lng": "-112.0492"
}
},
"phone": "840-965-1293",
"website": "muriel.net",
"company": {
"name": "Larkin - Mohr",
"catchPhrase": "Persistent interactive ability",
"bs": "front-end maximize deliverables"
}
}
]