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": "12f29fd7-b494-4b6a-891c-8d164d827ca4",
"name": "Sharon O'Reilly",
"username": "Linnie68",
"email": "Alice.Becker@yahoo.com",
"address": {
"street": "Crona Mall",
"suite": 32352,
"city": "Bednarmouth",
"zipcode": "47472-4435",
"geo": {
"lat": "-81.5627",
"lng": "63.7991"
}
},
"phone": "1-707-855-5297 x95589",
"website": "worse-disaster.net",
"company": {
"name": "Shields Group",
"catchPhrase": "Automated even-keeled protocol",
"bs": "maximize distributed niches"
}
},
{
"id": "e5bf57c8-9432-43ca-bcb4-747a607c7b7c",
"name": "Conor Goldner",
"username": "Amani_Runolfsson",
"email": "Mafalda_Welch57@hotmail.com",
"address": {
"street": "McCullough Road",
"suite": 22663,
"city": "West Gerardo",
"zipcode": "03413-9475",
"geo": {
"lat": "-55.9008",
"lng": "-178.3318"
}
},
"phone": "952.479.0804",
"website": "petty-rostrum.info",
"company": {
"name": "Borer Inc",
"catchPhrase": "Balanced mobile framework",
"bs": "cultivate clicks-and-mortar eyeballs"
}
},
{
"id": "e7eb0155-7564-4beb-9b2e-cf1b935504d4",
"name": "Verla Dietrich",
"username": "Francisca.Wyman30",
"email": "Elliott_Hoppe@yahoo.com",
"address": {
"street": "King Village",
"suite": 12196,
"city": "Auershire",
"zipcode": "92536",
"geo": {
"lat": "50.9781",
"lng": "21.8169"
}
},
"phone": "300.478.3692",
"website": "unwitting-vertigo.info",
"company": {
"name": "VonRueden - Wyman",
"catchPhrase": "Re-contextualized radical algorithm",
"bs": "empower integrated e-business"
}
},
{
"id": "d4481af1-a256-45ee-b3b9-2cd76e74c575",
"name": "Kallie Batz",
"username": "Aiden_Reynolds55",
"email": "Kamren26@yahoo.com",
"address": {
"street": "Gregg Port",
"suite": 37610,
"city": "North Virginieland",
"zipcode": "94633",
"geo": {
"lat": "-12.4221",
"lng": "62.9142"
}
},
"phone": "790.629.2393",
"website": "enormous-profit.info",
"company": {
"name": "Hintz, Tillman and Ratke",
"catchPhrase": "Diverse homogeneous core",
"bs": "evolve end-to-end paradigms"
}
},
{
"id": "fd79d9ba-0827-4ee6-a546-21a859b19854",
"name": "Florence Nolan",
"username": "Jaren_Daniel4",
"email": "Deondre_Osinski44@hotmail.com",
"address": {
"street": "Gladyce Inlet",
"suite": 69783,
"city": "Tinaport",
"zipcode": "59798-3111",
"geo": {
"lat": "68.9872",
"lng": "-88.3441"
}
},
"phone": "424.859.2225 x8941",
"website": "identical-committee.name",
"company": {
"name": "Harber - Heaney",
"catchPhrase": "Centralized explicit functionalities",
"bs": "architect distributed content"
}
},
{
"id": "dcc8aa8a-5db1-4939-9390-9bd10c1a0734",
"name": "Judge Kshlerin",
"username": "Alek10",
"email": "Lemuel.Waelchi@hotmail.com",
"address": {
"street": "Katlynn Locks",
"suite": 45122,
"city": "Wilkinsonview",
"zipcode": "51419-3328",
"geo": {
"lat": "-50.6519",
"lng": "-150.1891"
}
},
"phone": "728.316.6740 x57563",
"website": "nocturnal-tribe.org",
"company": {
"name": "Carroll - Schimmel",
"catchPhrase": "Versatile heuristic time-frame",
"bs": "embrace transparent relationships"
}
},
{
"id": "10474a82-8dad-40f7-af85-f9e81952be0e",
"name": "Makenna Batz",
"username": "Salma_Vandervort53",
"email": "Alexandria_Raynor35@hotmail.com",
"address": {
"street": "O'Hara Harbors",
"suite": 2651,
"city": "Hegmannhaven",
"zipcode": "23943",
"geo": {
"lat": "43.2738",
"lng": "18.3015"
}
},
"phone": "551.724.5784 x9350",
"website": "rapid-step-brother.biz",
"company": {
"name": "Osinski, Rowe and Watsica",
"catchPhrase": "Organic dedicated initiative",
"bs": "incubate B2C eyeballs"
}
},
{
"id": "70510568-053e-4a53-a9b5-fe6b24a615b8",
"name": "Joshua Grady",
"username": "Montana91",
"email": "Kelly.Conroy31@yahoo.com",
"address": {
"street": "Ally Manors",
"suite": 22908,
"city": "New Marielleview",
"zipcode": "96195",
"geo": {
"lat": "-9.4798",
"lng": "-152.1470"
}
},
"phone": "205.959.2236 x96114",
"website": "doting-fortress.net",
"company": {
"name": "Sipes - Walsh",
"catchPhrase": "Programmable holistic projection",
"bs": "enhance next-generation users"
}
},
{
"id": "3735161b-3366-4a40-bf23-66b0e8485809",
"name": "Mabel Cremin",
"username": "Jody.Brekke35",
"email": "Zoila.Bosco@yahoo.com",
"address": {
"street": "Kassulke Views",
"suite": 70865,
"city": "East Adella",
"zipcode": "90402-3596",
"geo": {
"lat": "53.5610",
"lng": "88.5959"
}
},
"phone": "1-958-555-2534",
"website": "dizzy-spec.info",
"company": {
"name": "Keebler - Steuber",
"catchPhrase": "Compatible demand-driven service-desk",
"bs": "disintermediate global networks"
}
},
{
"id": "c34382da-25c4-45ab-854c-cdb6bf30cb7f",
"name": "Ervin Kassulke",
"username": "Cheyanne.Okuneva37",
"email": "Murray_Wyman25@gmail.com",
"address": {
"street": "Hardy Ways",
"suite": 19823,
"city": "Nikomouth",
"zipcode": "45012-3543",
"geo": {
"lat": "-40.6026",
"lng": "169.5679"
}
},
"phone": "631-339-1675 x71637",
"website": "poor-fedora.net",
"company": {
"name": "Baumbach LLC",
"catchPhrase": "Fundamental attitude-oriented internet solution",
"bs": "syndicate granular communities"
}
},
{
"id": "75f0ac41-d340-47ec-a2b3-060788f72da9",
"name": "Elenor Toy",
"username": "Andreane46",
"email": "Dorthy22@yahoo.com",
"address": {
"street": "Dalton Brook",
"suite": 36385,
"city": "West Babylon",
"zipcode": "00497",
"geo": {
"lat": "73.2446",
"lng": "-157.6099"
}
},
"phone": "1-612-989-3040 x41015",
"website": "tidy-cocktail.org",
"company": {
"name": "Murphy, Beer and Carter",
"catchPhrase": "Horizontal transitional moratorium",
"bs": "leverage world-class channels"
}
},
{
"id": "bde29173-0e9e-4638-a429-0175d520a74b",
"name": "Hank Bailey",
"username": "Loyal.Kerluke22",
"email": "Zelma_Bailey75@hotmail.com",
"address": {
"street": "Wilford Oval",
"suite": 77291,
"city": "South Mckayla",
"zipcode": "92477",
"geo": {
"lat": "-61.6535",
"lng": "46.8156"
}
},
"phone": "(852) 351-8453",
"website": "envious-stretch.com",
"company": {
"name": "Nikolaus Group",
"catchPhrase": "Profound methodical adapter",
"bs": "embrace 24/365 e-tailers"
}
},
{
"id": "dab096c2-f9cc-4204-9264-ae08e04263be",
"name": "Stella Purdy",
"username": "Greyson54",
"email": "Santina.Bartoletti23@hotmail.com",
"address": {
"street": "Cassidy Isle",
"suite": 45612,
"city": "Lake Tatum",
"zipcode": "32338",
"geo": {
"lat": "54.8374",
"lng": "111.4544"
}
},
"phone": "(301) 863-1096 x47485",
"website": "experienced-cape.org",
"company": {
"name": "Zboncak, Gerhold and Beahan",
"catchPhrase": "Versatile coherent attitude",
"bs": "benchmark 24/7 channels"
}
},
{
"id": "ff76b4ad-e2e9-47f7-9e7e-10eff7ba39ad",
"name": "Carmelo Hilpert",
"username": "Nathanial.Morar",
"email": "Beaulah10@gmail.com",
"address": {
"street": "Janae Forest",
"suite": 7141,
"city": "North Alichester",
"zipcode": "45080",
"geo": {
"lat": "-30.1085",
"lng": "77.0615"
}
},
"phone": "1-537-371-3676",
"website": "snarling-ephyra.info",
"company": {
"name": "Quitzon - Osinski",
"catchPhrase": "Team-oriented didactic alliance",
"bs": "enable mission-critical applications"
}
},
{
"id": "4cad459d-3348-42d5-a7af-4526dcb81631",
"name": "Donald Ebert",
"username": "Lew_Beatty27",
"email": "Harvey_Beer63@gmail.com",
"address": {
"street": "Damaris Expressway",
"suite": 33689,
"city": "Magdalenview",
"zipcode": "25149-1557",
"geo": {
"lat": "49.1509",
"lng": "-141.8953"
}
},
"phone": "807-642-2439",
"website": "powerful-innocent.biz",
"company": {
"name": "Hessel, Hermann and Sporer",
"catchPhrase": "User-friendly incremental monitoring",
"bs": "repurpose proactive action-items"
}
},
{
"id": "d9480505-d23b-414a-a2fe-db5872d42b0c",
"name": "Avery Altenwerth",
"username": "Amalia_Stanton",
"email": "Kiel_Lebsack14@gmail.com",
"address": {
"street": "Reuben Island",
"suite": 30925,
"city": "Lake Charlesview",
"zipcode": "59011-6658",
"geo": {
"lat": "1.2652",
"lng": "70.0839"
}
},
"phone": "1-789-387-8697",
"website": "snappy-fraud.biz",
"company": {
"name": "Dare - O'Hara",
"catchPhrase": "Robust attitude-oriented data-warehouse",
"bs": "deliver world-class e-business"
}
},
{
"id": "9b55c78f-34f7-44c5-9eec-4434733bd8da",
"name": "Nolan Torphy",
"username": "Kiara_Walker",
"email": "Ciara19@gmail.com",
"address": {
"street": "Koch Forges",
"suite": 9567,
"city": "Port Koreyville",
"zipcode": "60617-3121",
"geo": {
"lat": "-74.7807",
"lng": "84.3390"
}
},
"phone": "(305) 947-1621 x816",
"website": "dismal-destiny.net",
"company": {
"name": "Grady Group",
"catchPhrase": "Phased empowering strategy",
"bs": "whiteboard rich platforms"
}
},
{
"id": "9f8a4b64-85a6-4ea1-9722-d7033a933099",
"name": "Krista Prosacco",
"username": "Etha_Tromp",
"email": "Layne.Hauck@gmail.com",
"address": {
"street": "Luisa Gardens",
"suite": 14132,
"city": "Lake Sethfurt",
"zipcode": "44519-3771",
"geo": {
"lat": "-38.7903",
"lng": "-33.4267"
}
},
"phone": "(497) 638-0859",
"website": "evil-hog.net",
"company": {
"name": "Bahringer and Sons",
"catchPhrase": "Extended holistic analyzer",
"bs": "leverage customized metrics"
}
},
{
"id": "f7b2d4e2-3813-4748-9a7f-d2cb2b30dd4d",
"name": "Ibrahim Gerlach",
"username": "Teresa_Hessel",
"email": "Vella_Huel@gmail.com",
"address": {
"street": "Mayer Shore",
"suite": 78897,
"city": "Port Halieside",
"zipcode": "62048",
"geo": {
"lat": "54.5047",
"lng": "11.8484"
}
},
"phone": "1-894-816-7577 x89360",
"website": "past-bill.biz",
"company": {
"name": "Schuster LLC",
"catchPhrase": "Horizontal impactful toolset",
"bs": "syndicate value-added models"
}
},
{
"id": "57e0e5fc-074c-4b54-90df-828a61a877f7",
"name": "Dalton Bechtelar",
"username": "Leatha_Maggio56",
"email": "Dino_Jaskolski@gmail.com",
"address": {
"street": "Olson Highway",
"suite": 47680,
"city": "West Seneca",
"zipcode": "78080-3973",
"geo": {
"lat": "16.1952",
"lng": "-75.8875"
}
},
"phone": "1-658-758-8246 x8748",
"website": "brief-timetable.net",
"company": {
"name": "Ledner and Sons",
"catchPhrase": "Devolved background ability",
"bs": "engineer B2B platforms"
}
},
{
"id": "aa0f2c5c-6d8c-4e65-8517-7b2d0e0adf0a",
"name": "Cade Dickinson",
"username": "Gabriella21",
"email": "Kailyn47@gmail.com",
"address": {
"street": "Maximilian Drives",
"suite": 87827,
"city": "New Terrill",
"zipcode": "98082",
"geo": {
"lat": "48.6958",
"lng": "-121.4323"
}
},
"phone": "251-861-5085",
"website": "several-elver.org",
"company": {
"name": "McKenzie LLC",
"catchPhrase": "Programmable empowering alliance",
"bs": "unleash end-to-end eyeballs"
}
},
{
"id": "872b59ca-d8b9-471d-bd79-eee928051044",
"name": "Ada Howe",
"username": "Kayla_Wehner",
"email": "Jayne_Grimes@gmail.com",
"address": {
"street": "Hessel Via",
"suite": 30406,
"city": "Port Suzanne",
"zipcode": "68779",
"geo": {
"lat": "80.8538",
"lng": "-27.8547"
}
},
"phone": "(571) 376-3880",
"website": "dreary-step-brother.org",
"company": {
"name": "Cronin, Bernier and Nikolaus",
"catchPhrase": "Sharable multi-tasking definition",
"bs": "transition leading-edge bandwidth"
}
},
{
"id": "7c92a67b-783b-43f8-b877-68a126ad9eab",
"name": "Quinton Gulgowski",
"username": "Raul43",
"email": "Stephany_Cassin50@gmail.com",
"address": {
"street": "Aurelie Gardens",
"suite": 80096,
"city": "Haleighhaven",
"zipcode": "41836",
"geo": {
"lat": "51.0500",
"lng": "-104.2355"
}
},
"phone": "401.701.9636 x9874",
"website": "terrific-profile.name",
"company": {
"name": "Emard Group",
"catchPhrase": "Object-based optimal concept",
"bs": "generate leading-edge ROI"
}
},
{
"id": "13579365-7ff3-4297-a876-e29e811e3f53",
"name": "Alek Daugherty",
"username": "Josefina.Satterfield",
"email": "Kaelyn14@hotmail.com",
"address": {
"street": "Charlotte Parkways",
"suite": 73356,
"city": "Fayside",
"zipcode": "85762",
"geo": {
"lat": "58.1052",
"lng": "68.3482"
}
},
"phone": "838-981-6462",
"website": "oblong-fruit.biz",
"company": {
"name": "Stark - O'Keefe",
"catchPhrase": "Polarised zero tolerance access",
"bs": "aggregate robust deliverables"
}
},
{
"id": "62c94ee0-195b-4c36-aed6-f947189b0c2e",
"name": "Rupert Ledner",
"username": "Clark.Wuckert94",
"email": "Idell69@yahoo.com",
"address": {
"street": "Elbert Squares",
"suite": 35219,
"city": "Lake Markside",
"zipcode": "68024-0022",
"geo": {
"lat": "64.9314",
"lng": "-84.5829"
}
},
"phone": "672-766-8590 x54695",
"website": "self-reliant-sideburns.com",
"company": {
"name": "Bayer Inc",
"catchPhrase": "Switchable client-driven monitoring",
"bs": "engage interactive e-business"
}
},
{
"id": "2f4f525f-662c-4cd4-8d95-3e5a6f6ebaea",
"name": "Jerel Mann",
"username": "Demetrius47",
"email": "Hillard_Borer8@yahoo.com",
"address": {
"street": "Breitenberg View",
"suite": 11326,
"city": "North Danstad",
"zipcode": "63525-8328",
"geo": {
"lat": "-56.4761",
"lng": "-174.5910"
}
},
"phone": "1-369-500-5963 x36039",
"website": "jaded-republic.biz",
"company": {
"name": "Fritsch, Abernathy and Cassin",
"catchPhrase": "Team-oriented multi-state benchmark",
"bs": "implement bleeding-edge e-commerce"
}
},
{
"id": "2dbd5d0a-a387-47d9-9d7c-62f073f2786c",
"name": "Jess Walker",
"username": "Joanie_Tremblay",
"email": "Francisco54@gmail.com",
"address": {
"street": "Houston Prairie",
"suite": 29622,
"city": "Hammeschester",
"zipcode": "08836",
"geo": {
"lat": "-68.9674",
"lng": "131.8015"
}
},
"phone": "1-622-813-9886",
"website": "impish-investor.name",
"company": {
"name": "Harvey, Rohan and Smith",
"catchPhrase": "Ergonomic neutral framework",
"bs": "aggregate innovative initiatives"
}
},
{
"id": "b35f8fd2-c41a-4a22-8e56-acf43243f729",
"name": "Ashleigh Zboncak",
"username": "Arnoldo_Ratke",
"email": "Deontae.Welch85@gmail.com",
"address": {
"street": "Merle Landing",
"suite": 80239,
"city": "Labadieport",
"zipcode": "19118",
"geo": {
"lat": "-27.4713",
"lng": "-96.8487"
}
},
"phone": "328-759-0633 x67238",
"website": "shady-frontier.net",
"company": {
"name": "Schuppe - Hegmann",
"catchPhrase": "Business-focused methodical orchestration",
"bs": "maximize synergistic eyeballs"
}
},
{
"id": "9a7bf836-dd4f-49a0-81a6-fb03415a5d8d",
"name": "Kenny Grady",
"username": "Maximillia.Kassulke40",
"email": "Alysson.Mitchell@gmail.com",
"address": {
"street": "Steuber Inlet",
"suite": 56234,
"city": "Raynorfurt",
"zipcode": "48440",
"geo": {
"lat": "37.9786",
"lng": "8.2441"
}
},
"phone": "(626) 651-0279",
"website": "glass-region.com",
"company": {
"name": "Brekke - Jones",
"catchPhrase": "Visionary client-driven policy",
"bs": "synergize seamless experiences"
}
},
{
"id": "c8bc0953-70a1-4ee4-a843-5742a8eb356a",
"name": "Allen King",
"username": "Adelia.Lynch",
"email": "Cristal5@hotmail.com",
"address": {
"street": "Arturo Way",
"suite": 51012,
"city": "Lake Elbertmouth",
"zipcode": "10354",
"geo": {
"lat": "-25.5121",
"lng": "70.9834"
}
},
"phone": "(920) 690-4422 x005",
"website": "drafty-grandparent.name",
"company": {
"name": "Jast Inc",
"catchPhrase": "Multi-channelled uniform model",
"bs": "optimize efficient relationships"
}
}
][
{
"id": "d4481af1-a256-45ee-b3b9-2cd76e74c575",
"name": "Kallie Batz",
"username": "Aiden_Reynolds55",
"email": "Kamren26@yahoo.com",
"address": {
"street": "Gregg Port",
"suite": 37610,
"city": "North Virginieland",
"zipcode": "94633",
"geo": {
"lat": "-12.4221",
"lng": "62.9142"
}
},
"phone": "790.629.2393",
"website": "enormous-profit.info",
"company": {
"name": "Hintz, Tillman and Ratke",
"catchPhrase": "Diverse homogeneous core",
"bs": "evolve end-to-end paradigms"
}
}
]