v4.7.4

React dropdown select

Dropdown select for react

Customisable dropdown select/multi-select component for react with custom render callback props to override inner components

Install via npm:

SHELLnpm install --save react-dropdown-select

Use:

JSXimport Select from 'react-dropdown-select';

export const App = ({ options }) => (
  <Select
    multi
    options={options}
    onChange={(values) => this.onChange(values)}
  />
);

Demo

 

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:

Options:
[
  {
    "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"
    }
  }
]
Selected values:
[
  {
    "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"
    }
  }
]