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": "7614875e-6d44-43a0-9f01-424318bb5d89",
"name": "Ransom Stracke",
"username": "Laisha12",
"email": "Marjory92@yahoo.com",
"address": {
"street": "Dangelo Neck",
"suite": 63983,
"city": "Roobside",
"zipcode": "01310",
"geo": {
"lat": "6.7263",
"lng": "73.2404"
}
},
"phone": "596-773-0195 x90733",
"website": "frosty-close.info",
"company": {
"name": "Hills LLC",
"catchPhrase": "Grass-roots dedicated installation",
"bs": "recontextualize impactful paradigms"
}
},
{
"id": "fd258e44-b168-4452-a90e-a530d09baa1c",
"name": "Lucas Bergnaum",
"username": "Raphael.Crooks18",
"email": "Lennie_Turcotte@yahoo.com",
"address": {
"street": "Bode Crossing",
"suite": 67190,
"city": "Rockford",
"zipcode": "73383-5899",
"geo": {
"lat": "44.2070",
"lng": "-123.1539"
}
},
"phone": "672-735-1465 x8369",
"website": "tremendous-mastoid.net",
"company": {
"name": "Feeney Inc",
"catchPhrase": "Seamless clear-thinking open system",
"bs": "grow bleeding-edge platforms"
}
},
{
"id": "2dd255e0-af6b-47fb-ba0e-ba833a3ec8ed",
"name": "Kimberly Simonis",
"username": "Carol68",
"email": "Jackson.Reynolds@gmail.com",
"address": {
"street": "Larkin Pass",
"suite": 44820,
"city": "Mrazfort",
"zipcode": "28455",
"geo": {
"lat": "29.8880",
"lng": "148.9594"
}
},
"phone": "941-435-3155 x41108",
"website": "trustworthy-chocolate.com",
"company": {
"name": "Jones - Bins",
"catchPhrase": "Future-proofed interactive function",
"bs": "engage wireless ROI"
}
},
{
"id": "4e5dc8b7-c237-464e-a19f-79033d23772c",
"name": "Elroy Halvorson",
"username": "Angie.Bergstrom36",
"email": "Gwen12@yahoo.com",
"address": {
"street": "Branson Terrace",
"suite": 78405,
"city": "North Shawna",
"zipcode": "07871",
"geo": {
"lat": "-31.8327",
"lng": "40.7505"
}
},
"phone": "(674) 645-2935 x2614",
"website": "kindly-wording.name",
"company": {
"name": "Morar, Haag and Stark",
"catchPhrase": "Optimized fault-tolerant installation",
"bs": "repurpose transparent portals"
}
},
{
"id": "c2969586-6418-41b0-8c73-6c19fe597663",
"name": "Darius Graham",
"username": "Carolyn.Armstrong",
"email": "Abigayle_Brekke@yahoo.com",
"address": {
"street": "Godfrey Terrace",
"suite": 46713,
"city": "Melynafurt",
"zipcode": "59049-7611",
"geo": {
"lat": "77.9630",
"lng": "-49.3513"
}
},
"phone": "956.889.6700 x5031",
"website": "concrete-boom.name",
"company": {
"name": "Farrell - Kunde",
"catchPhrase": "Versatile actuating process improvement",
"bs": "target web-enabled networks"
}
},
{
"id": "09f739a5-f892-4abe-ba36-7a6f317c3f87",
"name": "Lemuel Klocko",
"username": "Dakota.Marvin",
"email": "Khalil25@gmail.com",
"address": {
"street": "Hahn Brooks",
"suite": 22512,
"city": "Lake Maurice",
"zipcode": "41439",
"geo": {
"lat": "-43.4394",
"lng": "-14.0769"
}
},
"phone": "(425) 323-7845",
"website": "boring-website.biz",
"company": {
"name": "Bergnaum - DuBuque",
"catchPhrase": "Persevering context-sensitive function",
"bs": "implement efficient systems"
}
},
{
"id": "402a0b31-a762-45d3-9a3e-982d8f6b4ab1",
"name": "Ethan Schowalter",
"username": "Lisa58",
"email": "Carolyn3@hotmail.com",
"address": {
"street": "Rohan Fords",
"suite": 97580,
"city": "New Jesus",
"zipcode": "41902",
"geo": {
"lat": "-77.1578",
"lng": "141.5099"
}
},
"phone": "519.465.5442 x05462",
"website": "wiry-swordfight.org",
"company": {
"name": "Reinger - Glover",
"catchPhrase": "Multi-channelled discrete challenge",
"bs": "mesh B2B applications"
}
},
{
"id": "55d829db-7cd3-4b90-a742-2e888c785131",
"name": "Alvina Mueller",
"username": "Adriana_Stamm",
"email": "Enos90@gmail.com",
"address": {
"street": "Daniel Square",
"suite": 90333,
"city": "Pagacbury",
"zipcode": "74747",
"geo": {
"lat": "76.3716",
"lng": "163.1741"
}
},
"phone": "967-467-2750 x52024",
"website": "trifling-copyright.info",
"company": {
"name": "Brown LLC",
"catchPhrase": "Object-based impactful database",
"bs": "cultivate dynamic architectures"
}
},
{
"id": "8233b6fa-a9bf-49a7-9bd3-2995578f0c78",
"name": "Eduardo Yundt",
"username": "Orrin98",
"email": "Kathryne_Dach19@gmail.com",
"address": {
"street": "Kim Island",
"suite": 37994,
"city": "Bowling Green",
"zipcode": "82040-4918",
"geo": {
"lat": "-51.1361",
"lng": "61.7557"
}
},
"phone": "676.731.6297 x155",
"website": "frizzy-woolens.org",
"company": {
"name": "Pacocha, Lind and Bashirian",
"catchPhrase": "Multi-layered cohesive definition",
"bs": "deliver impactful blockchains"
}
},
{
"id": "b8cb1890-5f70-4f38-b084-903e7047585f",
"name": "Jayce Larson",
"username": "Hailey54",
"email": "Leslie.Abernathy@hotmail.com",
"address": {
"street": "Haley Dam",
"suite": 22549,
"city": "North Marcia",
"zipcode": "96829-1331",
"geo": {
"lat": "76.6967",
"lng": "159.3139"
}
},
"phone": "616.272.4617 x1662",
"website": "aching-prefix.biz",
"company": {
"name": "Schamberger - Wunsch",
"catchPhrase": "Robust demand-driven hierarchy",
"bs": "visualize out-of-the-box content"
}
},
{
"id": "baccfa4c-8f77-4543-9b78-26d3c1ec126d",
"name": "Rosie Kirlin",
"username": "Wilfrid.Carter96",
"email": "Lucinda45@hotmail.com",
"address": {
"street": "Pagac Walk",
"suite": 78294,
"city": "Port Taylor",
"zipcode": "43323-4581",
"geo": {
"lat": "-65.0454",
"lng": "108.4412"
}
},
"phone": "831.434.1304 x8621",
"website": "hairy-kayak.name",
"company": {
"name": "Stark and Sons",
"catchPhrase": "Grass-roots multi-state solution",
"bs": "enhance dot-com communities"
}
},
{
"id": "ec03f8b7-f962-4bea-bac8-56ec06f369f9",
"name": "Santina Marvin",
"username": "Easton81",
"email": "Maximilian_Mitchell31@yahoo.com",
"address": {
"street": "Madonna Walk",
"suite": 11003,
"city": "Bergstromville",
"zipcode": "45305",
"geo": {
"lat": "58.4889",
"lng": "-13.5876"
}
},
"phone": "407.563.8146",
"website": "disgusting-directive.com",
"company": {
"name": "Blick - Gutkowski",
"catchPhrase": "Open-architected zero tolerance function",
"bs": "grow best-of-breed experiences"
}
},
{
"id": "cccfb26b-3b14-4c39-8987-bcfd20be3dbc",
"name": "Aimee Donnelly",
"username": "Harold.Graham",
"email": "Tyra33@gmail.com",
"address": {
"street": "Naomi Path",
"suite": 58445,
"city": "North Jarrod",
"zipcode": "46887",
"geo": {
"lat": "0.9753",
"lng": "102.7618"
}
},
"phone": "1-838-904-1515 x287",
"website": "polite-standing.name",
"company": {
"name": "Sipes, Haley and Davis",
"catchPhrase": "Integrated multi-tasking success",
"bs": "mesh seamless eyeballs"
}
},
{
"id": "a88a6a91-fcec-4bcf-b703-c4e8ded6d5ff",
"name": "Danielle Casper",
"username": "Penelope.Schmidt",
"email": "Hassan_Cormier85@hotmail.com",
"address": {
"street": "Armand Vista",
"suite": 5908,
"city": "North Ewaldville",
"zipcode": "08493",
"geo": {
"lat": "11.5700",
"lng": "65.6542"
}
},
"phone": "(768) 829-0359 x773",
"website": "noteworthy-gaming.org",
"company": {
"name": "Hickle - Zboncak",
"catchPhrase": "Enterprise-wide directional service-desk",
"bs": "expedite bricks-and-clicks platforms"
}
},
{
"id": "1eb02575-5c3d-4669-9482-e3f9c12ec4c3",
"name": "Vincent Price",
"username": "Brittany73",
"email": "Ivy_Kessler12@hotmail.com",
"address": {
"street": "Sipes Manors",
"suite": 88626,
"city": "North Marty",
"zipcode": "52185-7040",
"geo": {
"lat": "58.1382",
"lng": "-61.7522"
}
},
"phone": "822.465.6445",
"website": "practical-waterfront.biz",
"company": {
"name": "O'Hara, Gerlach and Collins",
"catchPhrase": "Grass-roots disintermediate challenge",
"bs": "innovate cross-platform vortals"
}
},
{
"id": "47baec33-c9e7-4682-9aa1-b5b25250831b",
"name": "Estevan Abernathy",
"username": "Bella98",
"email": "Wilmer32@yahoo.com",
"address": {
"street": "Keagan Harbor",
"suite": 61538,
"city": "Konopelskimouth",
"zipcode": "93013",
"geo": {
"lat": "25.0413",
"lng": "-15.3567"
}
},
"phone": "1-765-451-2794 x55076",
"website": "white-copper.info",
"company": {
"name": "Nolan - Hyatt",
"catchPhrase": "User-friendly grid-enabled neural-net",
"bs": "cultivate dot-com niches"
}
},
{
"id": "ca86f15e-5631-4252-b343-28f8597ad1c6",
"name": "Ansel Legros",
"username": "Kennedi.Price0",
"email": "Haskell.Predovic31@hotmail.com",
"address": {
"street": "Kyra Street",
"suite": 90171,
"city": "Grantstad",
"zipcode": "06521-1086",
"geo": {
"lat": "-70.9808",
"lng": "175.4055"
}
},
"phone": "718.635.9775 x33268",
"website": "forceful-census.com",
"company": {
"name": "Parker, Prohaska and D'Amore",
"catchPhrase": "Multi-layered content-based collaboration",
"bs": "transform vertical web services"
}
},
{
"id": "8be741aa-bd9b-454e-9d4e-c2932f84e54e",
"name": "Coby Rippin",
"username": "Samara_Ondricka",
"email": "Julia48@yahoo.com",
"address": {
"street": "Roel Fords",
"suite": 91134,
"city": "Wyoming",
"zipcode": "44024",
"geo": {
"lat": "-69.8193",
"lng": "173.5596"
}
},
"phone": "(749) 676-1412",
"website": "mountainous-shortage.biz",
"company": {
"name": "Feil, Blanda and Sipes",
"catchPhrase": "Secured human-resource knowledge user",
"bs": "implement synergistic networks"
}
},
{
"id": "d5ef779f-8ead-413a-94ff-fd1db1397d12",
"name": "Timmothy Bahringer",
"username": "Bettye49",
"email": "Gay.Keebler@yahoo.com",
"address": {
"street": "Frami Stravenue",
"suite": 18734,
"city": "New Milton",
"zipcode": "07857-0918",
"geo": {
"lat": "16.2921",
"lng": "-85.4139"
}
},
"phone": "614.328.2871 x30724",
"website": "necessary-methane.net",
"company": {
"name": "O'Reilly, Zieme and Harris",
"catchPhrase": "Managed explicit product",
"bs": "recontextualize clicks-and-mortar content"
}
},
{
"id": "93f7d8e3-d801-44b3-8a3f-a8cd543d6cb8",
"name": "Kellen Baumbach",
"username": "Eliane.Grimes99",
"email": "Susana.Schuppe@gmail.com",
"address": {
"street": "Metz Forest",
"suite": 55960,
"city": "Thompsonstad",
"zipcode": "33435",
"geo": {
"lat": "-57.1338",
"lng": "43.8771"
}
},
"phone": "379.370.5164 x01064",
"website": "yellowish-ligand.biz",
"company": {
"name": "Streich - Terry",
"catchPhrase": "Quality-focused fresh-thinking open system",
"bs": "cultivate extensible eyeballs"
}
},
{
"id": "f7ad4be7-9fb8-4eb8-9587-aac8a6a2c354",
"name": "Rosemary Dare",
"username": "Antonina25",
"email": "Alyson71@gmail.com",
"address": {
"street": "Lydia Squares",
"suite": 46426,
"city": "Wilmerburgh",
"zipcode": "46474-3284",
"geo": {
"lat": "31.0037",
"lng": "145.1291"
}
},
"phone": "495.336.4021 x7294",
"website": "satisfied-course.biz",
"company": {
"name": "McLaughlin - Schaden",
"catchPhrase": "Pre-emptive 4th generation hub",
"bs": "whiteboard bricks-and-clicks e-commerce"
}
},
{
"id": "b8ccf73b-52ee-4da1-a235-41615011b123",
"name": "Prince Abshire",
"username": "Shea.Hintz",
"email": "Zoe.Runolfsdottir38@yahoo.com",
"address": {
"street": "Carmen Freeway",
"suite": 88100,
"city": "Schadenshire",
"zipcode": "75269",
"geo": {
"lat": "81.7941",
"lng": "-23.7250"
}
},
"phone": "(699) 376-8181 x8225",
"website": "defenseless-encirclement.com",
"company": {
"name": "Quigley - Vandervort",
"catchPhrase": "Innovative 4th generation approach",
"bs": "engineer wireless e-markets"
}
},
{
"id": "fae32177-adf4-4a2f-8b82-7f7b9c58ff7d",
"name": "Sheldon Okuneva",
"username": "Adolfo.Harber",
"email": "Alvena_Hyatt40@gmail.com",
"address": {
"street": "Earlene Gardens",
"suite": 97770,
"city": "Haileeville",
"zipcode": "29261-6814",
"geo": {
"lat": "-84.3856",
"lng": "159.1823"
}
},
"phone": "529.638.8533 x558",
"website": "triangular-jockey.com",
"company": {
"name": "Cremin Inc",
"catchPhrase": "Ergonomic disintermediate software",
"bs": "grow extensible schemas"
}
},
{
"id": "71b2d1ea-6b72-4c73-9a79-75d7aea934d0",
"name": "Dee Goodwin",
"username": "Roger.Prohaska",
"email": "Myrl_Jakubowski22@yahoo.com",
"address": {
"street": "Grimes Way",
"suite": 27158,
"city": "Othaville",
"zipcode": "53059",
"geo": {
"lat": "80.7286",
"lng": "74.0031"
}
},
"phone": "(835) 516-2434 x9896",
"website": "bewitched-veneer.name",
"company": {
"name": "Pollich - Klocko",
"catchPhrase": "Triple-buffered incremental policy",
"bs": "aggregate bleeding-edge technologies"
}
},
{
"id": "6d70065b-4b4f-4293-bf77-4bcc73143d8b",
"name": "Effie Harber",
"username": "Timmothy16",
"email": "Mozell_Dickens@yahoo.com",
"address": {
"street": "Bertram Lock",
"suite": 39035,
"city": "Petaluma",
"zipcode": "71133",
"geo": {
"lat": "48.6555",
"lng": "-159.1537"
}
},
"phone": "491.709.1999 x6020",
"website": "plaintive-temple.info",
"company": {
"name": "Bauch Group",
"catchPhrase": "Implemented coherent neural-net",
"bs": "synthesize killer e-business"
}
},
{
"id": "f77eea69-eefc-4b63-b507-a872c0e62e20",
"name": "Sigmund Franecki",
"username": "Lucious.Lynch60",
"email": "Alba60@hotmail.com",
"address": {
"street": "Arianna Path",
"suite": 56878,
"city": "Westborough",
"zipcode": "69418",
"geo": {
"lat": "52.2476",
"lng": "118.8970"
}
},
"phone": "1-537-688-1023 x087",
"website": "stunning-oven.info",
"company": {
"name": "Zboncak, Johns and Graham",
"catchPhrase": "User-friendly attitude-oriented policy",
"bs": "facilitate out-of-the-box infomediaries"
}
},
{
"id": "55b199da-ae20-4a7f-9dde-9eaea4b0dfd6",
"name": "Gavin Keeling",
"username": "Kitty19",
"email": "Charley.Stehr32@gmail.com",
"address": {
"street": "Mavis Mills",
"suite": 86872,
"city": "East Lillyport",
"zipcode": "65663",
"geo": {
"lat": "-3.6257",
"lng": "-38.1998"
}
},
"phone": "(446) 873-6932 x92709",
"website": "moral-darkness.org",
"company": {
"name": "Little, Purdy and Heaney",
"catchPhrase": "Cross-group needs-based application",
"bs": "harness interactive bandwidth"
}
},
{
"id": "52818810-eb28-46af-82dc-bd5b4fb78e21",
"name": "Piper Mann",
"username": "Letha_Johnston16",
"email": "Myra_Bailey@yahoo.com",
"address": {
"street": "Ardith Underpass",
"suite": 19304,
"city": "Bogisichborough",
"zipcode": "01404",
"geo": {
"lat": "-34.9609",
"lng": "8.5429"
}
},
"phone": "1-608-640-2320 x173",
"website": "showy-flame.net",
"company": {
"name": "Halvorson, Price and Monahan",
"catchPhrase": "Synchronised transitional budgetary management",
"bs": "generate 24/7 e-business"
}
},
{
"id": "0acc8ddd-244c-4205-8344-6a0738c311cd",
"name": "Raymundo Altenwerth",
"username": "Johann_Pacocha78",
"email": "Lonny_Bogisich@gmail.com",
"address": {
"street": "Fern Throughway",
"suite": 54402,
"city": "North Judah",
"zipcode": "13633-6579",
"geo": {
"lat": "-71.0199",
"lng": "-30.1038"
}
},
"phone": "(275) 927-0607",
"website": "infatuated-chem.name",
"company": {
"name": "Schroeder and Sons",
"catchPhrase": "Polarised non-volatile monitoring",
"bs": "redefine 24/365 functionalities"
}
},
{
"id": "04107c6d-7fd6-41f7-8cb2-9b65b4eec783",
"name": "Arnulfo Osinski",
"username": "Destinee.Sipes",
"email": "Walton_Barrows@hotmail.com",
"address": {
"street": "Concepcion Dale",
"suite": 84239,
"city": "Brentwood",
"zipcode": "22741",
"geo": {
"lat": "-18.1550",
"lng": "-14.3806"
}
},
"phone": "1-203-755-1878",
"website": "lanky-scene.net",
"company": {
"name": "Price - Bosco",
"catchPhrase": "Public-key bifurcated support",
"bs": "seize world-class ROI"
}
}
][
{
"id": "4e5dc8b7-c237-464e-a19f-79033d23772c",
"name": "Elroy Halvorson",
"username": "Angie.Bergstrom36",
"email": "Gwen12@yahoo.com",
"address": {
"street": "Branson Terrace",
"suite": 78405,
"city": "North Shawna",
"zipcode": "07871",
"geo": {
"lat": "-31.8327",
"lng": "40.7505"
}
},
"phone": "(674) 645-2935 x2614",
"website": "kindly-wording.name",
"company": {
"name": "Morar, Haag and Stark",
"catchPhrase": "Optimized fault-tolerant installation",
"bs": "repurpose transparent portals"
}
}
]