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": "75e5acab-e7ac-4231-9be1-316b7011e398",
"name": "Frederik Nienow",
"username": "Dejah.Romaguera",
"email": "Constantin_Schuppe@gmail.com",
"address": {
"street": "Ubaldo Freeway",
"suite": 44278,
"city": "East Hectorchester",
"zipcode": "58640",
"geo": {
"lat": "42.0190",
"lng": "95.1822"
}
},
"phone": "(728) 622-0196",
"website": "normal-corporal.biz",
"company": {
"name": "Kuphal, Konopelski and Beier",
"catchPhrase": "Universal heuristic algorithm",
"bs": "deliver web-enabled web-readiness"
}
},
{
"id": "e6640fd5-582d-4600-bfc0-b680ba13fc2e",
"name": "Sierra Champlin",
"username": "Viviane_Sipes",
"email": "Arlie92@yahoo.com",
"address": {
"street": "Boyer Islands",
"suite": 24348,
"city": "Beiertown",
"zipcode": "04823-8144",
"geo": {
"lat": "30.4845",
"lng": "-74.8257"
}
},
"phone": "(748) 870-5484 x11146",
"website": "dry-waiting.net",
"company": {
"name": "Cremin Inc",
"catchPhrase": "Compatible national structure",
"bs": "strategize enterprise platforms"
}
},
{
"id": "5086023e-56f7-40e6-a2f4-24bbc572d37e",
"name": "Ivy Anderson",
"username": "Fermin_Howell",
"email": "Creola.Wunsch@hotmail.com",
"address": {
"street": "Oran Track",
"suite": 54002,
"city": "New Yvetteville",
"zipcode": "41540",
"geo": {
"lat": "-45.6160",
"lng": "162.2291"
}
},
"phone": "894.428.3736 x892",
"website": "different-race.net",
"company": {
"name": "Kemmer Group",
"catchPhrase": "Digitized encompassing orchestration",
"bs": "morph holistic ROI"
}
},
{
"id": "d52e62bb-96bf-44da-b09e-2d76619c41fb",
"name": "Kendall Grant",
"username": "Stanford43",
"email": "Garrett_Halvorson74@gmail.com",
"address": {
"street": "Rudy Glens",
"suite": 91345,
"city": "West Brandyfort",
"zipcode": "00576",
"geo": {
"lat": "-39.6908",
"lng": "-112.1726"
}
},
"phone": "549.509.5316",
"website": "coordinated-uniform.info",
"company": {
"name": "Towne - Moore",
"catchPhrase": "Profound executive open architecture",
"bs": "evolve sticky e-business"
}
},
{
"id": "f3427a85-65e9-4486-b01e-9b624ed65937",
"name": "Josiah Anderson",
"username": "Esteban_Walter",
"email": "Myrtle.OConnell35@hotmail.com",
"address": {
"street": "Waelchi Park",
"suite": 78386,
"city": "West Arjun",
"zipcode": "61248",
"geo": {
"lat": "7.5113",
"lng": "-74.4035"
}
},
"phone": "(242) 882-5947",
"website": "super-metal.info",
"company": {
"name": "Willms, Larkin and Osinski",
"catchPhrase": "Secured client-driven matrices",
"bs": "maximize front-end niches"
}
},
{
"id": "9fa4bff4-1cff-4435-838e-0ea237d183cb",
"name": "Godfrey Green",
"username": "Fred.Heller19",
"email": "Dorothy_Morar@hotmail.com",
"address": {
"street": "Kuphal Path",
"suite": 94402,
"city": "Port Retta",
"zipcode": "37232",
"geo": {
"lat": "27.7954",
"lng": "101.7760"
}
},
"phone": "450.828.9369",
"website": "poor-entrance.com",
"company": {
"name": "Purdy and Sons",
"catchPhrase": "Grass-roots object-oriented framework",
"bs": "recontextualize virtual action-items"
}
},
{
"id": "b66b4417-279b-4d8e-adf9-d5bf7ac865f0",
"name": "Vicente King",
"username": "Everardo_Fadel44",
"email": "Derick_OKon95@hotmail.com",
"address": {
"street": "Carmel Rapids",
"suite": 89852,
"city": "Conorbury",
"zipcode": "64135-3907",
"geo": {
"lat": "-47.0204",
"lng": "-164.3941"
}
},
"phone": "781.920.7937 x829",
"website": "aromatic-clarinet.info",
"company": {
"name": "Leannon, Swaniawski and Torphy",
"catchPhrase": "User-centric static solution",
"bs": "deliver extensible bandwidth"
}
},
{
"id": "6d12d69a-9162-4051-8898-180e22be8566",
"name": "Princess Homenick",
"username": "Efrain21",
"email": "Alisa28@gmail.com",
"address": {
"street": "Judge Estate",
"suite": 9995,
"city": "West Lindsayshire",
"zipcode": "16906",
"geo": {
"lat": "-15.2679",
"lng": "-170.0159"
}
},
"phone": "(314) 405-4824 x76717",
"website": "dimwitted-trek.name",
"company": {
"name": "Becker - Shanahan",
"catchPhrase": "User-centric logistical contingency",
"bs": "incubate dot-com bandwidth"
}
},
{
"id": "913ae015-1f18-4341-a194-ec240ec154b7",
"name": "Josh Effertz",
"username": "Jocelyn20",
"email": "Cooper99@hotmail.com",
"address": {
"street": "Koss Ford",
"suite": 80969,
"city": "Bechtelarmouth",
"zipcode": "70917",
"geo": {
"lat": "-81.8122",
"lng": "-17.5046"
}
},
"phone": "1-561-469-6425 x9203",
"website": "scholarly-nibble.biz",
"company": {
"name": "Feest - Schmeler",
"catchPhrase": "Team-oriented leading edge monitoring",
"bs": "e-enable integrated initiatives"
}
},
{
"id": "83724eca-57f0-485c-9991-bfa6834060bf",
"name": "Ramon Lemke",
"username": "Eve49",
"email": "Ford_Reichel76@gmail.com",
"address": {
"street": "Rippin Villages",
"suite": 61341,
"city": "Jevonchester",
"zipcode": "83703",
"geo": {
"lat": "28.3547",
"lng": "-82.7099"
}
},
"phone": "(480) 331-3766",
"website": "frivolous-dragonfruit.biz",
"company": {
"name": "Sporer, Miller and Nienow",
"catchPhrase": "Sharable national monitoring",
"bs": "strategize virtual models"
}
},
{
"id": "9b39b54b-6bf6-4281-a2d6-f724c1e16900",
"name": "Kathryne Schiller",
"username": "Karl_Nienow47",
"email": "Cortney40@hotmail.com",
"address": {
"street": "Hessel Plains",
"suite": 80031,
"city": "Visalia",
"zipcode": "26704",
"geo": {
"lat": "73.1015",
"lng": "101.7088"
}
},
"phone": "799.877.5476",
"website": "homely-handball.info",
"company": {
"name": "Wolf LLC",
"catchPhrase": "Persistent bandwidth-monitored frame",
"bs": "reintermediate sticky deliverables"
}
},
{
"id": "27a90bc0-9232-44ee-baad-a4e91dff472a",
"name": "Jamie Dietrich",
"username": "Deja_Lockman57",
"email": "Leta29@yahoo.com",
"address": {
"street": "Friedrich Port",
"suite": 69619,
"city": "West Daisy",
"zipcode": "89832",
"geo": {
"lat": "-13.8010",
"lng": "-174.2213"
}
},
"phone": "745-617-9277 x973",
"website": "thin-designation.com",
"company": {
"name": "Denesik LLC",
"catchPhrase": "Profound motivating installation",
"bs": "empower rich methodologies"
}
},
{
"id": "0e22867a-0107-411b-bc76-bffc3f795220",
"name": "Jeramie Kemmer",
"username": "Madisyn71",
"email": "Elroy_Pfannerstill98@gmail.com",
"address": {
"street": "Littel Bridge",
"suite": 39551,
"city": "Port Meredithside",
"zipcode": "02761",
"geo": {
"lat": "-63.7669",
"lng": "-97.3938"
}
},
"phone": "762-262-1526 x65881",
"website": "bronze-checking.com",
"company": {
"name": "Tillman - Wisoky",
"catchPhrase": "Progressive empowering intranet",
"bs": "envisioneer leading-edge eyeballs"
}
},
{
"id": "8cf12461-f275-40a7-bbc8-3abc648751ce",
"name": "Cydney Murazik",
"username": "Wilton.Fahey",
"email": "Nathanial_Cronin71@gmail.com",
"address": {
"street": "Marley Pike",
"suite": 64513,
"city": "Nienowtown",
"zipcode": "48849",
"geo": {
"lat": "-69.8121",
"lng": "-5.0115"
}
},
"phone": "1-886-359-0074",
"website": "plush-ozone.org",
"company": {
"name": "Murazik Group",
"catchPhrase": "Front-line well-modulated data-warehouse",
"bs": "empower seamless deliverables"
}
},
{
"id": "06bc0a53-a541-43a9-9b17-651076e56ca1",
"name": "Cecil Carter",
"username": "Maynard.Mertz38",
"email": "Alexandra45@yahoo.com",
"address": {
"street": "Jaleel Neck",
"suite": 37338,
"city": "Harlingen",
"zipcode": "62422-5016",
"geo": {
"lat": "77.9761",
"lng": "77.2722"
}
},
"phone": "(234) 768-2185",
"website": "upright-apartment.biz",
"company": {
"name": "Reichert, Kohler and Prosacco",
"catchPhrase": "Enhanced multimedia open architecture",
"bs": "engage sexy bandwidth"
}
},
{
"id": "e7104798-adeb-4627-8ebf-e2cb87048c75",
"name": "Preston Frami",
"username": "Vallie.Altenwerth56",
"email": "Bonnie30@gmail.com",
"address": {
"street": "Aliyah Causeway",
"suite": 45187,
"city": "Durganbury",
"zipcode": "44169-5920",
"geo": {
"lat": "83.0664",
"lng": "-172.8002"
}
},
"phone": "645.843.2908 x5441",
"website": "scared-cement.net",
"company": {
"name": "Tremblay - Stracke",
"catchPhrase": "Future-proofed bifurcated frame",
"bs": "incubate user-centric niches"
}
},
{
"id": "d076585b-e8c1-4014-b8e6-050a866ebc96",
"name": "Camren Reynolds",
"username": "Charles_Nienow",
"email": "Maudie34@yahoo.com",
"address": {
"street": "Eduardo Circles",
"suite": 58206,
"city": "Ariannaview",
"zipcode": "88319",
"geo": {
"lat": "-60.8738",
"lng": "-92.5014"
}
},
"phone": "959.938.6366",
"website": "gleaming-cut.biz",
"company": {
"name": "Larkin and Sons",
"catchPhrase": "Streamlined discrete standardization",
"bs": "productize cross-media synergies"
}
},
{
"id": "ef1b665f-39a6-41d2-b9a0-15d1316833e6",
"name": "Armani Armstrong",
"username": "Raleigh77",
"email": "Berniece.Gorczany@hotmail.com",
"address": {
"street": "Casper Harbors",
"suite": 63449,
"city": "Lake Kayley",
"zipcode": "23655",
"geo": {
"lat": "37.9336",
"lng": "157.3173"
}
},
"phone": "809.338.5741 x3631",
"website": "second-hand-overcoat.info",
"company": {
"name": "Ryan - Nicolas",
"catchPhrase": "Quality-focused real-time time-frame",
"bs": "transform killer e-services"
}
},
{
"id": "a4016251-a031-424f-b03f-1a8055bed82d",
"name": "Aglae Rosenbaum",
"username": "Elsie_Douglas",
"email": "Hilton_Hagenes50@yahoo.com",
"address": {
"street": "Mante Glen",
"suite": 14488,
"city": "Christyborough",
"zipcode": "48621-6572",
"geo": {
"lat": "-14.0635",
"lng": "139.0195"
}
},
"phone": "424-453-2456 x76569",
"website": "phony-observation.com",
"company": {
"name": "Connelly, Stehr and Bosco",
"catchPhrase": "Multi-channelled intangible installation",
"bs": "reinvent out-of-the-box platforms"
}
},
{
"id": "225692fa-db40-43aa-9116-51ea2d927fef",
"name": "Sadye Ritchie",
"username": "Korey_Dibbert",
"email": "Mallory_Donnelly@gmail.com",
"address": {
"street": "Hamill Manor",
"suite": 46665,
"city": "East Jakobtown",
"zipcode": "16323",
"geo": {
"lat": "39.0138",
"lng": "-123.5803"
}
},
"phone": "543.675.6765",
"website": "lovely-cent.net",
"company": {
"name": "Mosciski, Cronin and Miller",
"catchPhrase": "Monitored stable archive",
"bs": "envisioneer one-to-one solutions"
}
},
{
"id": "16cc212e-9aa0-4676-a9b8-c89be084c503",
"name": "Jake Lowe",
"username": "Jazmyn.Rogahn",
"email": "Blair_Tromp98@yahoo.com",
"address": {
"street": "Zelda Glens",
"suite": 29378,
"city": "Grand Junction",
"zipcode": "06596-0954",
"geo": {
"lat": "-24.6877",
"lng": "95.0350"
}
},
"phone": "352-607-7578 x2289",
"website": "pleased-stripe.com",
"company": {
"name": "White Inc",
"catchPhrase": "Function-based bi-directional budgetary management",
"bs": "empower real-time interfaces"
}
},
{
"id": "db72279b-0c0d-4407-9653-29bcecb50a2c",
"name": "Else Jerde",
"username": "Enoch61",
"email": "Electa.Reichert9@hotmail.com",
"address": {
"street": "Shayne Parks",
"suite": 46234,
"city": "Bartholomeport",
"zipcode": "19869-4540",
"geo": {
"lat": "-10.8468",
"lng": "-176.9662"
}
},
"phone": "(272) 967-3759",
"website": "creative-problem.com",
"company": {
"name": "Brekke, Quigley and Wolf",
"catchPhrase": "Cloned executive firmware",
"bs": "envisioneer strategic markets"
}
},
{
"id": "eace7013-7347-43b6-b791-e13416847c20",
"name": "Bertrand Frami",
"username": "Stella_Abernathy",
"email": "Marcella.OHara@hotmail.com",
"address": {
"street": "Reggie Point",
"suite": 36809,
"city": "Lake Chyna",
"zipcode": "61390",
"geo": {
"lat": "5.2151",
"lng": "-178.9352"
}
},
"phone": "566.682.8226 x03521",
"website": "rotating-combination.com",
"company": {
"name": "Thompson, Ledner and Balistreri",
"catchPhrase": "Mandatory disintermediate leverage",
"bs": "architect rich technologies"
}
},
{
"id": "d714fe1e-771e-439f-bffb-3f781f145e18",
"name": "Roslyn Aufderhar",
"username": "Curtis14",
"email": "Elvie_Rau@yahoo.com",
"address": {
"street": "Mann Shore",
"suite": 13283,
"city": "Masonburgh",
"zipcode": "71810",
"geo": {
"lat": "46.8209",
"lng": "-174.1798"
}
},
"phone": "905.390.8866",
"website": "long-personal.net",
"company": {
"name": "Kiehn LLC",
"catchPhrase": "Devolved solution-oriented process improvement",
"bs": "deploy B2C initiatives"
}
},
{
"id": "442bec03-9607-45dc-b044-e80986879ff7",
"name": "Kristoffer Shanahan",
"username": "Maximillian.Morissette78",
"email": "Tyson.Volkman@hotmail.com",
"address": {
"street": "O'Connell Creek",
"suite": 2762,
"city": "New Burnice",
"zipcode": "25825",
"geo": {
"lat": "23.6330",
"lng": "1.5504"
}
},
"phone": "(906) 969-3989",
"website": "torn-summary.com",
"company": {
"name": "Luettgen LLC",
"catchPhrase": "Grass-roots full-range data-warehouse",
"bs": "enable proactive mindshare"
}
},
{
"id": "02c22e90-dacc-47f9-9965-c5287ac3f845",
"name": "Donnell Ernser",
"username": "Naomi_Ankunding",
"email": "Lawson.Schulist42@hotmail.com",
"address": {
"street": "Flossie Flat",
"suite": 60047,
"city": "Stiedemannborough",
"zipcode": "41858",
"geo": {
"lat": "-43.2122",
"lng": "90.8899"
}
},
"phone": "672-677-9568",
"website": "unwitting-query.name",
"company": {
"name": "Okuneva Group",
"catchPhrase": "Advanced bottom-line encryption",
"bs": "incentivize value-added markets"
}
},
{
"id": "ee86e909-0807-4f9b-930d-bf092e0e7e7c",
"name": "Jordan Rempel",
"username": "Rafael53",
"email": "Camilla.Reynolds@hotmail.com",
"address": {
"street": "Quigley Harbors",
"suite": 87696,
"city": "West Gabrielleborough",
"zipcode": "58375",
"geo": {
"lat": "75.0017",
"lng": "-56.7358"
}
},
"phone": "1-259-269-2419",
"website": "nimble-magnitude.name",
"company": {
"name": "Ernser - Terry",
"catchPhrase": "Multi-layered multi-state help-desk",
"bs": "expedite transparent metrics"
}
},
{
"id": "6b7361e3-ef84-4a98-871e-d7f094d346e0",
"name": "Merle Hudson",
"username": "Rowan61",
"email": "Lera_Marks48@yahoo.com",
"address": {
"street": "Donna Burg",
"suite": 51687,
"city": "Tannerport",
"zipcode": "46627",
"geo": {
"lat": "-68.6602",
"lng": "-25.1875"
}
},
"phone": "992-497-1458 x0689",
"website": "unhappy-porch.com",
"company": {
"name": "Kilback, Langworth and Breitenberg",
"catchPhrase": "De-engineered responsive migration",
"bs": "disintermediate distributed communities"
}
},
{
"id": "b38e924e-3005-4a4d-bdcf-47844eda3f22",
"name": "Sherwood DuBuque",
"username": "Lola39",
"email": "Isobel.Kohler48@hotmail.com",
"address": {
"street": "Quincy Mission",
"suite": 75735,
"city": "South Katherineport",
"zipcode": "55594-9943",
"geo": {
"lat": "8.8551",
"lng": "45.5555"
}
},
"phone": "951-682-6603 x0206",
"website": "lasting-impudence.info",
"company": {
"name": "Kunze Inc",
"catchPhrase": "Grass-roots zero administration adapter",
"bs": "e-enable synergistic infomediaries"
}
},
{
"id": "3723d81d-89a3-4c61-bc17-5ca5a2c57c15",
"name": "Janis Jacobs",
"username": "Bertrand30",
"email": "Wilbert.Glover@yahoo.com",
"address": {
"street": "Wiza Canyon",
"suite": 23971,
"city": "Edinburg",
"zipcode": "09903-1093",
"geo": {
"lat": "-9.6734",
"lng": "-63.4278"
}
},
"phone": "995-710-0144 x219",
"website": "far-flung-ounce.net",
"company": {
"name": "Towne - Von",
"catchPhrase": "Seamless coherent support",
"bs": "incubate bleeding-edge communities"
}
}
][
{
"id": "d52e62bb-96bf-44da-b09e-2d76619c41fb",
"name": "Kendall Grant",
"username": "Stanford43",
"email": "Garrett_Halvorson74@gmail.com",
"address": {
"street": "Rudy Glens",
"suite": 91345,
"city": "West Brandyfort",
"zipcode": "00576",
"geo": {
"lat": "-39.6908",
"lng": "-112.1726"
}
},
"phone": "549.509.5316",
"website": "coordinated-uniform.info",
"company": {
"name": "Towne - Moore",
"catchPhrase": "Profound executive open architecture",
"bs": "evolve sticky e-business"
}
}
]