Customisable dropdown select/multi-select component for react with custom render callback props to override inner components
SHELLnpm install --save react-dropdown-select
JSXimport 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": "f279b93c-a00a-40db-9529-f2b67f15c0ca", "name": "Dan Greenholt", "username": "Easton_Littel0", "email": "Lola.Crooks97@hotmail.com", "address": { "street": "Kuvalis Parkways", "suite": 59219, "city": "East Eddchester", "zipcode": "25042", "geo": { "lat": "-37.2512", "lng": "143.6481" } }, "phone": "497.501.2958 x760", "website": "juicy-temp.biz", "company": { "name": "Wolf - Price", "catchPhrase": "Centralized national Graphic Interface", "bs": "productize revolutionary content" } }, { "id": "d7f584a5-c758-4d2b-9637-c0129558b03e", "name": "Nils Klein", "username": "Neal.Hettinger", "email": "Dasia.Mosciski@yahoo.com", "address": { "street": "Louie Trail", "suite": 49917, "city": "Lake Delfina", "zipcode": "38131", "geo": { "lat": "-52.8653", "lng": "60.1579" } }, "phone": "(460) 912-6107", "website": "dearest-secretariat.org", "company": { "name": "Dietrich Group", "catchPhrase": "Inverse analyzing benchmark", "bs": "facilitate e-business paradigms" } }, { "id": "8116715f-6447-4503-9f16-ba40e2cda4fa", "name": "Vito Lueilwitz", "username": "Johathan_Swaniawski", "email": "Alessandro.Hackett6@yahoo.com", "address": { "street": "Damon Forge", "suite": 51071, "city": "Port Nathanielmouth", "zipcode": "77454", "geo": { "lat": "29.1035", "lng": "-158.0098" } }, "phone": "285.326.9014 x0199", "website": "gripping-county.info", "company": { "name": "Hartmann - Heller", "catchPhrase": "Synergistic well-modulated collaboration", "bs": "implement web-enabled partnerships" } }, { "id": "509e88f6-e8da-49a4-a8b1-52d1ede4453f", "name": "Sheila Jerde", "username": "Ambrose_Jacobson", "email": "Ryder.Gottlieb26@yahoo.com", "address": { "street": "Bernhard Unions", "suite": 10543, "city": "Sunrise Manor", "zipcode": "20548", "geo": { "lat": "62.4187", "lng": "-93.9574" } }, "phone": "711-583-8443 x9518", "website": "impassioned-tough-guy.org", "company": { "name": "Heathcote, Dietrich and Waelchi", "catchPhrase": "Cross-group multi-state challenge", "bs": "transition granular channels" } }, { "id": "f7b87f4a-8743-4b39-9599-c2b2b8bc1dfb", "name": "Libbie Krajcik", "username": "Bertrand11", "email": "Margarett82@gmail.com", "address": { "street": "Mraz Squares", "suite": 81070, "city": "Trompfort", "zipcode": "29923-6254", "geo": { "lat": "40.1193", "lng": "-83.3312" } }, "phone": "578.901.8722 x4458", "website": "nifty-mechanism.info", "company": { "name": "McClure, Price and Baumbach", "catchPhrase": "Enhanced needs-based info-mediaries", "bs": "whiteboard virtual infrastructures" } }, { "id": "cc9a651d-d211-478c-85ab-c3bac1c84d1f", "name": "Reva Murray", "username": "Manley_Schulist18", "email": "Faustino_Shields@hotmail.com", "address": { "street": "Emie Causeway", "suite": 10244, "city": "East Josefina", "zipcode": "30139", "geo": { "lat": "77.9881", "lng": "-122.5269" } }, "phone": "966-279-5813 x38852", "website": "appropriate-pear.net", "company": { "name": "Schumm, Gottlieb and Ratke", "catchPhrase": "Decentralized logistical superstructure", "bs": "whiteboard one-to-one infrastructures" } }, { "id": "95e2dcdc-3b76-4d25-aade-fe2569556611", "name": "Bart Hoeger", "username": "Keely_Mante", "email": "Cesar46@hotmail.com", "address": { "street": "Raoul Common", "suite": 40266, "city": "Lednerberg", "zipcode": "10882", "geo": { "lat": "-63.9088", "lng": "-162.7515" } }, "phone": "(217) 358-7461", "website": "ripe-horror.info", "company": { "name": "Buckridge - Waelchi", "catchPhrase": "Organized asymmetric budgetary management", "bs": "strategize cutting-edge methodologies" } }, { "id": "1ef765fa-0cb3-4b17-80b4-cd9c4b60a789", "name": "Velda Bogisich", "username": "Lou_Hermiston", "email": "Austen_Beer@gmail.com", "address": { "street": "Karianne Locks", "suite": 35538, "city": "Port Minniestad", "zipcode": "80958-7725", "geo": { "lat": "39.1074", "lng": "162.4659" } }, "phone": "1-279-415-8165 x28750", "website": "gracious-grasshopper.com", "company": { "name": "Casper, Grady and Halvorson", "catchPhrase": "User-centric empowering knowledge base", "bs": "morph visionary synergies" } }, { "id": "5dab882c-9656-4b17-896c-f92682bd7dd5", "name": "Elton Lockman", "username": "Virginia_Brakus69", "email": "Marty.Balistreri@hotmail.com", "address": { "street": "Glover Forge", "suite": 18489, "city": "O'Konview", "zipcode": "80156-0002", "geo": { "lat": "50.4281", "lng": "79.2449" } }, "phone": "312.600.8464 x2542", "website": "authentic-corduroy.biz", "company": { "name": "Howell - Bernhard", "catchPhrase": "Persevering bottom-line Graphic Interface", "bs": "enable B2B architectures" } }, { "id": "1a5d24ee-ec47-4803-bcf5-0ffa18faf648", "name": "Lysanne Trantow", "username": "Keon.OKon75", "email": "Ashton_Rodriguez25@gmail.com", "address": { "street": "Mohr Run", "suite": 16437, "city": "South Gate", "zipcode": "36604", "geo": { "lat": "-84.1563", "lng": "-179.1902" } }, "phone": "352.326.0648 x05741", "website": "incredible-dream.org", "company": { "name": "Fritsch - Becker", "catchPhrase": "Devolved full-range budgetary management", "bs": "orchestrate end-to-end solutions" } }, { "id": "09597b98-5309-4bcc-bf45-21b98ae674f8", "name": "Guy Farrell", "username": "Joanne.Gislason37", "email": "Alia_Rosenbaum@hotmail.com", "address": { "street": "Myah Courts", "suite": 24923, "city": "West Tyra", "zipcode": "24396", "geo": { "lat": "70.9680", "lng": "48.1882" } }, "phone": "1-399-877-3992", "website": "discrete-nymph.biz", "company": { "name": "Collier - Leffler", "catchPhrase": "Robust full-range budgetary management", "bs": "recontextualize cross-media paradigms" } }, { "id": "9107e4d1-dcd7-429b-a01f-a50d61090ecb", "name": "Ramiro Franey", "username": "Ima_Yost", "email": "Carson84@yahoo.com", "address": { "street": "Waelchi Mills", "suite": 24168, "city": "Bahringerberg", "zipcode": "63227-8393", "geo": { "lat": "-30.4233", "lng": "155.5593" } }, "phone": "1-432-804-7332", "website": "grounded-shoelace.com", "company": { "name": "Barrows, Streich and King", "catchPhrase": "Networked value-added protocol", "bs": "synthesize B2B relationships" } }, { "id": "ac6ecd9a-23c6-426a-9063-cc918e49fd6b", "name": "Rozella Nicolas", "username": "Therese32", "email": "Maurice0@yahoo.com", "address": { "street": "Manley Mount", "suite": 86992, "city": "Kendale Lakes", "zipcode": "83457-7680", "geo": { "lat": "-70.2398", "lng": "-79.1643" } }, "phone": "776.686.6084 x309", "website": "cluttered-lending.org", "company": { "name": "Mayert, Bergnaum and Sawayn", "catchPhrase": "Organic real-time definition", "bs": "e-enable mission-critical e-business" } }, { "id": "ef56eef0-ca0f-4e01-bfe7-cb33c26df0cc", "name": "Werner Boyle", "username": "Lane12", "email": "Ena.Wisozk@gmail.com", "address": { "street": "Adams Parkway", "suite": 58372, "city": "New Derick", "zipcode": "62112-7338", "geo": { "lat": "-58.9047", "lng": "-88.3940" } }, "phone": "1-213-777-6740", "website": "discrete-piccolo.net", "company": { "name": "Goodwin Inc", "catchPhrase": "Grass-roots actuating toolset", "bs": "maximize 24/365 experiences" } }, { "id": "86e521ee-404c-4d2a-baa5-f87a7a34eb8e", "name": "Annabel Bruen", "username": "Elisabeth.Turner60", "email": "Raegan.Kassulke@gmail.com", "address": { "street": "Glover Valley", "suite": 53749, "city": "New Maverick", "zipcode": "35623-7505", "geo": { "lat": "-60.3095", "lng": "-163.0092" } }, "phone": "391-242-8854", "website": "yummy-roommate.org", "company": { "name": "Wilderman and Sons", "catchPhrase": "Synergistic empowering utilisation", "bs": "drive visionary technologies" } }, { "id": "e58e4b83-e938-46fd-bcaa-ae6040c62e84", "name": "Solon Goldner", "username": "Justice_Konopelski", "email": "Otis.Ryan@gmail.com", "address": { "street": "Lockman Circles", "suite": 94291, "city": "Hiltonbury", "zipcode": "44683", "geo": { "lat": "75.0122", "lng": "172.3364" } }, "phone": "228.479.2264 x230", "website": "stimulating-mochi.biz", "company": { "name": "Mosciski, Hoeger and Spencer", "catchPhrase": "Enhanced exuding Graphic Interface", "bs": "target collaborative content" } }, { "id": "5b98c2f0-8654-4724-9ee6-8d7454477e20", "name": "Elna O'Hara", "username": "Valentine.Schinner", "email": "Luz13@yahoo.com", "address": { "street": "Marques Springs", "suite": 70795, "city": "New Estellaberg", "zipcode": "73729", "geo": { "lat": "28.0430", "lng": "2.8112" } }, "phone": "976-329-7047 x487", "website": "smug-opportunist.net", "company": { "name": "Schaefer - Rosenbaum", "catchPhrase": "Seamless uniform secured line", "bs": "e-enable intuitive networks" } }, { "id": "9111f35d-10b7-4ada-b4a5-440ac1c269ae", "name": "Andreanne Mueller", "username": "Josiane89", "email": "Eino_Lueilwitz91@yahoo.com", "address": { "street": "Frami Creek", "suite": 47684, "city": "Lake Velma", "zipcode": "26411-8669", "geo": { "lat": "-7.9693", "lng": "-92.0527" } }, "phone": "821.489.6378 x415", "website": "impure-yurt.net", "company": { "name": "Collier - Vandervort", "catchPhrase": "Seamless scalable flexibility", "bs": "productize e-business applications" } }, { "id": "1da7fbb1-21dd-476d-bae4-a02735a0ba5e", "name": "Evie Ferry", "username": "Mozelle.Wunsch74", "email": "Cyrus38@yahoo.com", "address": { "street": "Charlene Springs", "suite": 39746, "city": "East Joel", "zipcode": "94113", "geo": { "lat": "45.3620", "lng": "-99.3129" } }, "phone": "787-955-7540 x777", "website": "suspicious-octave.name", "company": { "name": "Frami - Erdman", "catchPhrase": "Ameliorated dynamic knowledge user", "bs": "exploit leading-edge convergence" } }, { "id": "feac225a-70da-4e16-b88b-fd302936c64f", "name": "Mervin Beatty", "username": "Barney.Dach", "email": "Carissa.Witting11@yahoo.com", "address": { "street": "VonRueden Turnpike", "suite": 53510, "city": "Krajcikburgh", "zipcode": "54341-1187", "geo": { "lat": "19.2817", "lng": "34.5960" } }, "phone": "872.296.7124 x48977", "website": "defenseless-father.com", "company": { "name": "O'Conner - Stamm", "catchPhrase": "Streamlined methodical access", "bs": "transition real-time deliverables" } }, { "id": "3c6043fa-875b-4f9c-83ca-34db56bacf77", "name": "Alden Doyle", "username": "Trudie87", "email": "Taya.Crist@gmail.com", "address": { "street": "Jordi Underpass", "suite": 50040, "city": "South Valley", "zipcode": "40235-1069", "geo": { "lat": "-5.0037", "lng": "-178.5645" } }, "phone": "1-804-841-2976 x688", "website": "extroverted-millimeter.biz", "company": { "name": "Parisian, McDermott and Luettgen", "catchPhrase": "Multi-lateral system-worthy core", "bs": "disintermediate bricks-and-clicks ROI" } }, { "id": "c7709c8a-932e-46ad-a0f6-c259935e5ca2", "name": "Sabrina McClure", "username": "Cruz.Boyle", "email": "Luella_Dicki@gmail.com", "address": { "street": "Zackery Terrace", "suite": 30641, "city": "West Milo", "zipcode": "05723-6100", "geo": { "lat": "65.5840", "lng": "-104.7907" } }, "phone": "(242) 607-9398 x36816", "website": "incomparable-plowman.info", "company": { "name": "Veum Group", "catchPhrase": "Cross-group bottom-line success", "bs": "syndicate B2B deliverables" } }, { "id": "2b16b22c-cf14-439f-8ebb-055b8ea8dfa8", "name": "Travon Olson", "username": "Rolando_Larson", "email": "Claudine_OConnell@hotmail.com", "address": { "street": "Becker Vista", "suite": 92009, "city": "Port Demond", "zipcode": "71854-2779", "geo": { "lat": "87.2650", "lng": "98.4467" } }, "phone": "1-731-361-4902", "website": "left-pond.biz", "company": { "name": "Streich, Wunsch and Fritsch", "catchPhrase": "Reduced global time-frame", "bs": "redefine virtual deliverables" } }, { "id": "35e9c262-4517-4c57-940e-582115e6a14d", "name": "Chesley O'Connell", "username": "Izaiah_Kessler79", "email": "Mason.Bogisich20@gmail.com", "address": { "street": "Jayson Mountains", "suite": 94275, "city": "Lake Kalefort", "zipcode": "25924-6322", "geo": { "lat": "33.8920", "lng": "64.4473" } }, "phone": "(813) 470-9213", "website": "unfinished-trolley.name", "company": { "name": "Bosco, Rippin and Carroll", "catchPhrase": "Automated dedicated pricing structure", "bs": "synergize viral partnerships" } }, { "id": "d0a3c35b-d028-4d1d-a860-7f412dbb07b0", "name": "Ansley Morissette", "username": "Gerda_Hilpert", "email": "Lee.Gutmann6@gmail.com", "address": { "street": "Reinger Wells", "suite": 68921, "city": "Paucekchester", "zipcode": "34029-2408", "geo": { "lat": "22.2888", "lng": "94.1566" } }, "phone": "1-867-803-1628", "website": "chilly-angle.com", "company": { "name": "Bayer - VonRueden", "catchPhrase": "Polarised secondary data-warehouse", "bs": "integrate B2B methodologies" } }, { "id": "75c744e4-7841-4600-a6f0-7ebf0f953059", "name": "Murphy Schimmel", "username": "Maudie.Brakus", "email": "Jimmy.Lueilwitz@hotmail.com", "address": { "street": "Ruecker Camp", "suite": 39495, "city": "Dorothyborough", "zipcode": "95220", "geo": { "lat": "-24.7694", "lng": "-169.9494" } }, "phone": "364-376-4651", "website": "violet-black.biz", "company": { "name": "Zboncak - Hilpert", "catchPhrase": "Polarised multimedia orchestration", "bs": "monetize compelling interfaces" } }, { "id": "8294bd79-73f0-470f-8ecb-230a9665d145", "name": "Raymond Grimes", "username": "Damon.Daniel11", "email": "Edwardo16@hotmail.com", "address": { "street": "Don Gardens", "suite": 54384, "city": "Raoulview", "zipcode": "37473-5742", "geo": { "lat": "86.9651", "lng": "175.4393" } }, "phone": "971-842-0432 x389", "website": "zealous-bosom.biz", "company": { "name": "Turcotte - Pacocha", "catchPhrase": "Cross-group local support", "bs": "facilitate cross-media eyeballs" } }, { "id": "39a916ee-2495-4fa4-99a0-04a6617b15ed", "name": "Dylan Becker", "username": "Jana.Zemlak41", "email": "Marcos_Kunde@yahoo.com", "address": { "street": "Ratke Lane", "suite": 41520, "city": "Wuckertborough", "zipcode": "08072", "geo": { "lat": "15.3564", "lng": "87.0341" } }, "phone": "1-626-371-9347 x984", "website": "female-pocketbook.name", "company": { "name": "Hyatt, Volkman and Heidenreich", "catchPhrase": "Exclusive regional Graphical User Interface", "bs": "integrate open-source channels" } }, { "id": "53a11299-78c7-4e85-abc5-1ac6285d2ac7", "name": "Hans Barton", "username": "Robb_Bins", "email": "Delmer.Wilkinson4@hotmail.com", "address": { "street": "Witting Mountains", "suite": 33046, "city": "McGlynnhaven", "zipcode": "03527-7630", "geo": { "lat": "-89.9223", "lng": "49.3725" } }, "phone": "815.864.8035 x330", "website": "witty-dump.org", "company": { "name": "Cummings Group", "catchPhrase": "Progressive analyzing conglomeration", "bs": "repurpose innovative systems" } }, { "id": "2d6f68b5-4b62-4b00-b1e2-554451351f4e", "name": "Adriana Zemlak", "username": "Nikki.Erdman", "email": "Lottie25@gmail.com", "address": { "street": "Wilbert Underpass", "suite": 78823, "city": "Cadechester", "zipcode": "12631-2850", "geo": { "lat": "-53.4173", "lng": "124.0086" } }, "phone": "1-580-271-0555", "website": "ornate-karate.org", "company": { "name": "Pagac - Von", "catchPhrase": "Monitored even-keeled focus group", "bs": "target ubiquitous experiences" } } ]
[ { "id": "509e88f6-e8da-49a4-a8b1-52d1ede4453f", "name": "Sheila Jerde", "username": "Ambrose_Jacobson", "email": "Ryder.Gottlieb26@yahoo.com", "address": { "street": "Bernhard Unions", "suite": 10543, "city": "Sunrise Manor", "zipcode": "20548", "geo": { "lat": "62.4187", "lng": "-93.9574" } }, "phone": "711-583-8443 x9518", "website": "impassioned-tough-guy.org", "company": { "name": "Heathcote, Dietrich and Waelchi", "catchPhrase": "Cross-group multi-state challenge", "bs": "transition granular channels" } } ]