v4.5.1

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

Mayra Cremin×

 

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": "5b682b3a-87b0-4925-aa16-defb47d6a4c4",
    "name": "Adrain Blanda",
    "username": "Sam_Sauer52",
    "email": "Mohammad95@yahoo.com",
    "address": {
      "street": "Stoltenberg Groves",
      "suite": 26156,
      "city": "Port Alec",
      "zipcode": "32360-8373",
      "geo": {
        "lat": "-9.3471",
        "lng": "-164.4411"
      }
    },
    "phone": "646.379.9941",
    "website": "blair.name",
    "company": {
      "name": "Corkery Inc",
      "catchPhrase": "Proactive leading edge Graphic Interface",
      "bs": "killer e-enable users"
    }
  },
  {
    "id": "055e5ff0-95c5-43f6-8b30-e2e7676a3889",
    "name": "Frederik Hansen",
    "username": "Amber22",
    "email": "Carmela.Romaguera22@gmail.com",
    "address": {
      "street": "Lesch Plains",
      "suite": 76315,
      "city": "Corkeryborough",
      "zipcode": "81946",
      "geo": {
        "lat": "-77.0665",
        "lng": "172.4359"
      }
    },
    "phone": "1-629-618-3831",
    "website": "jo.net",
    "company": {
      "name": "Daugherty - Reichel",
      "catchPhrase": "Persevering bi-directional instruction set",
      "bs": "front-end strategize deliverables"
    }
  },
  {
    "id": "ac6d0fb2-3322-4928-a143-beefa762cd87",
    "name": "Koby Champlin",
    "username": "Presley73",
    "email": "Tessie_Abbott@gmail.com",
    "address": {
      "street": "Leuschke Freeway",
      "suite": 30755,
      "city": "Tremblayside",
      "zipcode": "22342",
      "geo": {
        "lat": "21.8047",
        "lng": "-146.4273"
      }
    },
    "phone": "614-482-2618 x348",
    "website": "rylee.com",
    "company": {
      "name": "Stark LLC",
      "catchPhrase": "Universal secondary knowledge user",
      "bs": "web-enabled leverage partnerships"
    }
  },
  {
    "id": "97da8ef4-f1f9-4f85-a98b-4dfe37225e31",
    "name": "Mayra Cremin",
    "username": "Adell_Wiza6",
    "email": "Presley34@gmail.com",
    "address": {
      "street": "Emerson Mission",
      "suite": 61476,
      "city": "Port Leonardoborough",
      "zipcode": "96486",
      "geo": {
        "lat": "20.3183",
        "lng": "42.0683"
      }
    },
    "phone": "416-924-6548 x735",
    "website": "aiyana.name",
    "company": {
      "name": "Howell - Dibbert",
      "catchPhrase": "Automated holistic complexity",
      "bs": "leading-edge e-enable platforms"
    }
  },
  {
    "id": "e2cc763f-8497-421d-89e5-7a382c87afdf",
    "name": "Anderson Parisian",
    "username": "Gerhard48",
    "email": "Marlen_Robel13@yahoo.com",
    "address": {
      "street": "Haag Walk",
      "suite": 24242,
      "city": "South Elinorhaven",
      "zipcode": "00838",
      "geo": {
        "lat": "74.7103",
        "lng": "-119.7563"
      }
    },
    "phone": "1-440-327-4144 x54524",
    "website": "kody.net",
    "company": {
      "name": "Wilkinson, Raynor and Pollich",
      "catchPhrase": "Realigned secondary success",
      "bs": "transparent incentivize eyeballs"
    }
  },
  {
    "id": "03c6e7d8-116c-4131-9bfd-f15188612779",
    "name": "Berneice Legros",
    "username": "Ervin66",
    "email": "Vanessa_Larson28@hotmail.com",
    "address": {
      "street": "Lee Courts",
      "suite": 65780,
      "city": "Evansmouth",
      "zipcode": "42984",
      "geo": {
        "lat": "35.0097",
        "lng": "100.0793"
      }
    },
    "phone": "889.270.8885 x97557",
    "website": "bud.net",
    "company": {
      "name": "Cremin - Legros",
      "catchPhrase": "Implemented client-driven time-frame",
      "bs": "transparent architect portals"
    }
  },
  {
    "id": "9e5c3d0a-7e2d-4999-8c92-3bafebf4e5e0",
    "name": "Hailey Kutch",
    "username": "Santa17",
    "email": "Conner.Lueilwitz@gmail.com",
    "address": {
      "street": "Klein Stream",
      "suite": 37471,
      "city": "Lemketon",
      "zipcode": "59586-7734",
      "geo": {
        "lat": "79.0334",
        "lng": "-120.5003"
      }
    },
    "phone": "(860) 759-6882 x48859",
    "website": "mandy.info",
    "company": {
      "name": "Skiles, O'Keefe and Ward",
      "catchPhrase": "Object-based solution-oriented installation",
      "bs": "scalable reintermediate infomediaries"
    }
  },
  {
    "id": "25d27c8f-a45e-4114-92a6-09433dd67ecf",
    "name": "Ofelia Bode",
    "username": "Scotty_Reilly",
    "email": "Armand.Rempel6@yahoo.com",
    "address": {
      "street": "Jakubowski Squares",
      "suite": 26190,
      "city": "Zeldastad",
      "zipcode": "81956-5474",
      "geo": {
        "lat": "48.2351",
        "lng": "-151.6360"
      }
    },
    "phone": "1-501-947-0165 x58047",
    "website": "adelle.org",
    "company": {
      "name": "Abernathy - Labadie",
      "catchPhrase": "Object-based demand-driven adapter",
      "bs": "next-generation enhance infrastructures"
    }
  },
  {
    "id": "5c1b1f32-ec50-4002-811f-73b455e97c61",
    "name": "Blaise Harber",
    "username": "Lucio.Walsh61",
    "email": "Linwood.Bahringer@hotmail.com",
    "address": {
      "street": "Juvenal Mountain",
      "suite": 60684,
      "city": "Kutchland",
      "zipcode": "71386-9374",
      "geo": {
        "lat": "-85.6932",
        "lng": "-168.4219"
      }
    },
    "phone": "1-260-192-2846",
    "website": "margret.biz",
    "company": {
      "name": "Jaskolski, Medhurst and Fahey",
      "catchPhrase": "Organic upward-trending intranet",
      "bs": "enterprise optimize paradigms"
    }
  },
  {
    "id": "5a0b8ef0-bf6a-4845-97f7-8bc7cfcb9cab",
    "name": "Joy Koch",
    "username": "Donato_Emard",
    "email": "Nakia36@yahoo.com",
    "address": {
      "street": "Sanford Meadow",
      "suite": 60615,
      "city": "Thompsonberg",
      "zipcode": "47234",
      "geo": {
        "lat": "-66.4962",
        "lng": "-65.0456"
      }
    },
    "phone": "(719) 663-1618 x175",
    "website": "teagan.biz",
    "company": {
      "name": "Lakin Inc",
      "catchPhrase": "Self-enabling tangible matrix",
      "bs": "value-added seize users"
    }
  },
  {
    "id": "34beed31-060d-48c5-a5e5-85594cf4ce30",
    "name": "Allan Spinka",
    "username": "Gay_Cole87",
    "email": "Carley.Feest9@yahoo.com",
    "address": {
      "street": "Elouise Turnpike",
      "suite": 307,
      "city": "East Shanon",
      "zipcode": "08169-2731",
      "geo": {
        "lat": "-11.8346",
        "lng": "45.6441"
      }
    },
    "phone": "(897) 760-5770",
    "website": "reggie.biz",
    "company": {
      "name": "Fadel, Schroeder and Thiel",
      "catchPhrase": "Adaptive leading edge implementation",
      "bs": "collaborative productize e-tailers"
    }
  },
  {
    "id": "0859917b-1c7c-448d-8b53-f1c38afe1b65",
    "name": "Graciela Harber",
    "username": "Laurianne_Hilll59",
    "email": "Hank65@hotmail.com",
    "address": {
      "street": "Marvin Centers",
      "suite": 33649,
      "city": "New Lonniefurt",
      "zipcode": "49785-0689",
      "geo": {
        "lat": "53.9553",
        "lng": "171.8013"
      }
    },
    "phone": "(443) 946-2706 x52658",
    "website": "bartholome.biz",
    "company": {
      "name": "Schroeder and Sons",
      "catchPhrase": "Compatible heuristic parallelism",
      "bs": "cross-platform synthesize web services"
    }
  },
  {
    "id": "12ee7b91-3576-4c70-8617-1d07902f5604",
    "name": "Tristian Walter",
    "username": "Aaron.Muller",
    "email": "Yoshiko17@hotmail.com",
    "address": {
      "street": "Schuppe View",
      "suite": 71392,
      "city": "Judyport",
      "zipcode": "37169-3441",
      "geo": {
        "lat": "-45.1305",
        "lng": "-170.9573"
      }
    },
    "phone": "1-818-840-3789",
    "website": "amanda.name",
    "company": {
      "name": "Fisher Group",
      "catchPhrase": "Centralized attitude-oriented adapter",
      "bs": "interactive transition methodologies"
    }
  },
  {
    "id": "716230a8-71a2-465e-8a3f-d9879604859a",
    "name": "Wyatt Thiel",
    "username": "Cecil_Koss92",
    "email": "Elouise_Kshlerin28@yahoo.com",
    "address": {
      "street": "Walter Parkways",
      "suite": 61431,
      "city": "West Flossie",
      "zipcode": "24370-5496",
      "geo": {
        "lat": "77.4447",
        "lng": "37.1356"
      }
    },
    "phone": "337.389.7934 x6331",
    "website": "sherwood.com",
    "company": {
      "name": "Quigley Inc",
      "catchPhrase": "Object-based intangible productivity",
      "bs": "bricks-and-clicks engage models"
    }
  },
  {
    "id": "4bb55c24-0fdf-4b22-96fe-9c2fdf6fb31f",
    "name": "Kaylin Mante",
    "username": "Queenie19",
    "email": "Clarabelle85@hotmail.com",
    "address": {
      "street": "Brooks Valleys",
      "suite": 64823,
      "city": "Lake Bellstad",
      "zipcode": "56272",
      "geo": {
        "lat": "6.8890",
        "lng": "-82.0798"
      }
    },
    "phone": "(384) 887-5067",
    "website": "dusty.net",
    "company": {
      "name": "Schaefer - Murazik",
      "catchPhrase": "Persistent object-oriented projection",
      "bs": "proactive deploy mindshare"
    }
  },
  {
    "id": "b3ce6d1c-6f51-4302-b208-9d2f469cd99e",
    "name": "Barney Tromp",
    "username": "Shania69",
    "email": "Linda_Boehm@hotmail.com",
    "address": {
      "street": "Koelpin Isle",
      "suite": 89993,
      "city": "Bernhardview",
      "zipcode": "08959",
      "geo": {
        "lat": "64.0544",
        "lng": "-71.8808"
      }
    },
    "phone": "1-177-743-2266 x08895",
    "website": "verner.org",
    "company": {
      "name": "Carter Inc",
      "catchPhrase": "Synergistic context-sensitive circuit",
      "bs": "B2B target experiences"
    }
  },
  {
    "id": "57596a3e-bc0e-438f-a965-5593c6867305",
    "name": "Dannie Prohaska",
    "username": "Karina_Schinner",
    "email": "Isaiah_Smith86@gmail.com",
    "address": {
      "street": "Moen Spur",
      "suite": 73737,
      "city": "Jalonberg",
      "zipcode": "03364",
      "geo": {
        "lat": "86.6277",
        "lng": "-54.4997"
      }
    },
    "phone": "443.596.5547 x080",
    "website": "jade.biz",
    "company": {
      "name": "Bogan, Graham and Heaney",
      "catchPhrase": "Grass-roots cohesive moderator",
      "bs": "revolutionary reinvent interfaces"
    }
  },
  {
    "id": "1ce3ec7c-fc9e-451c-b878-d74553c8c9a9",
    "name": "Sammy Bosco",
    "username": "Mayra_Bins31",
    "email": "Aubree95@hotmail.com",
    "address": {
      "street": "Shany Junction",
      "suite": 75227,
      "city": "Susiebury",
      "zipcode": "75218",
      "geo": {
        "lat": "-85.1334",
        "lng": "123.9899"
      }
    },
    "phone": "(712) 076-2271",
    "website": "neha.info",
    "company": {
      "name": "Morar LLC",
      "catchPhrase": "Open-architected fault-tolerant architecture",
      "bs": "dot-com deploy models"
    }
  },
  {
    "id": "4fc13ddb-ea53-44e0-aae2-4d91669bc8f0",
    "name": "Madeline Brakus",
    "username": "Phyllis_Torphy",
    "email": "Gregorio.Gutmann57@hotmail.com",
    "address": {
      "street": "Sawayn Rapids",
      "suite": 43769,
      "city": "Macejkovicberg",
      "zipcode": "32279",
      "geo": {
        "lat": "47.4733",
        "lng": "85.5261"
      }
    },
    "phone": "072.248.6807",
    "website": "lindsey.org",
    "company": {
      "name": "O'Kon Inc",
      "catchPhrase": "Digitized leading edge superstructure",
      "bs": "wireless integrate interfaces"
    }
  },
  {
    "id": "4063766a-439b-4080-9604-fb9d5a65300b",
    "name": "Berenice Abernathy",
    "username": "Wyatt_Johnson60",
    "email": "Verda30@yahoo.com",
    "address": {
      "street": "Orie Field",
      "suite": 20132,
      "city": "East Rosemarie",
      "zipcode": "76376-0325",
      "geo": {
        "lat": "-3.0541",
        "lng": "79.3456"
      }
    },
    "phone": "688.364.2704",
    "website": "kamille.biz",
    "company": {
      "name": "Daugherty, Feeney and Predovic",
      "catchPhrase": "Business-focused logistical function",
      "bs": "B2C iterate infomediaries"
    }
  },
  {
    "id": "e85ae36c-ffaa-4f88-af65-b84515c924e9",
    "name": "Vidal Robel",
    "username": "Dolores39",
    "email": "Gisselle67@hotmail.com",
    "address": {
      "street": "Mariam Glens",
      "suite": 93503,
      "city": "East Maximus",
      "zipcode": "88448-6672",
      "geo": {
        "lat": "69.1342",
        "lng": "-129.3430"
      }
    },
    "phone": "1-489-992-7893",
    "website": "ines.com",
    "company": {
      "name": "Sawayn Group",
      "catchPhrase": "Public-key empowering portal",
      "bs": "best-of-breed streamline markets"
    }
  },
  {
    "id": "b4f1cc52-2be9-4058-9d0e-c3cdb9ded413",
    "name": "Lexie Homenick",
    "username": "Leilani37",
    "email": "Kallie64@yahoo.com",
    "address": {
      "street": "Elyssa Isle",
      "suite": 92411,
      "city": "North Ottoside",
      "zipcode": "72839-5288",
      "geo": {
        "lat": "35.7110",
        "lng": "-173.2044"
      }
    },
    "phone": "1-437-792-2835 x75984",
    "website": "floyd.name",
    "company": {
      "name": "Kassulke - Torp",
      "catchPhrase": "Adaptive 4th generation service-desk",
      "bs": "bricks-and-clicks brand supply-chains"
    }
  },
  {
    "id": "d7e71ed4-2550-4998-a987-4e3435ec0742",
    "name": "Aida Marvin",
    "username": "Ozella.Stanton",
    "email": "Vito_Breitenberg@gmail.com",
    "address": {
      "street": "Lonny Spur",
      "suite": 45413,
      "city": "Floydville",
      "zipcode": "14821-0643",
      "geo": {
        "lat": "-17.8804",
        "lng": "-42.9911"
      }
    },
    "phone": "(675) 886-5873 x5082",
    "website": "willy.biz",
    "company": {
      "name": "Botsford, Schiller and Roob",
      "catchPhrase": "Horizontal systemic approach",
      "bs": "magnetic evolve eyeballs"
    }
  },
  {
    "id": "3115d643-f3d8-4bf1-a0a8-d170be8225fc",
    "name": "Maya Bradtke",
    "username": "Frankie86",
    "email": "Tre.Moore@hotmail.com",
    "address": {
      "street": "Margarett Hill",
      "suite": 15216,
      "city": "Port Dahliaport",
      "zipcode": "45382",
      "geo": {
        "lat": "-85.2882",
        "lng": "73.4257"
      }
    },
    "phone": "738.148.0096 x1009",
    "website": "jordon.net",
    "company": {
      "name": "Bartoletti and Sons",
      "catchPhrase": "Profound 5th generation knowledge base",
      "bs": "next-generation benchmark paradigms"
    }
  },
  {
    "id": "00b0efe1-e80b-49ad-8f9c-8131e67605cc",
    "name": "Kiara Leffler",
    "username": "Norene88",
    "email": "Brianne.OKeefe@gmail.com",
    "address": {
      "street": "Schowalter Points",
      "suite": 85780,
      "city": "West Blake",
      "zipcode": "80986",
      "geo": {
        "lat": "-16.9328",
        "lng": "22.5107"
      }
    },
    "phone": "304-850-6674",
    "website": "claudia.info",
    "company": {
      "name": "Anderson, Heller and Ondricka",
      "catchPhrase": "Virtual 24 hour encryption",
      "bs": "rich e-enable schemas"
    }
  },
  {
    "id": "5aa07d82-db9a-46e8-be89-a739036b9039",
    "name": "Jettie Weissnat",
    "username": "Liliana.Wolff",
    "email": "Alanna.Carroll@yahoo.com",
    "address": {
      "street": "Lamont Heights",
      "suite": 69974,
      "city": "West Arnold",
      "zipcode": "44448",
      "geo": {
        "lat": "6.8109",
        "lng": "3.6192"
      }
    },
    "phone": "925.614.5642 x81484",
    "website": "mathias.name",
    "company": {
      "name": "Torp, Kassulke and McDermott",
      "catchPhrase": "Switchable needs-based time-frame",
      "bs": "world-class expedite relationships"
    }
  },
  {
    "id": "c327084f-700d-44a1-b2e4-d3fa01f5cf13",
    "name": "Sophie Franecki",
    "username": "Lera45",
    "email": "Caesar_Reilly59@gmail.com",
    "address": {
      "street": "Nicklaus Bypass",
      "suite": 92665,
      "city": "Blandaport",
      "zipcode": "42739-4001",
      "geo": {
        "lat": "-29.4585",
        "lng": "29.1643"
      }
    },
    "phone": "1-818-624-4632",
    "website": "cheyenne.net",
    "company": {
      "name": "Abbott, Sawayn and Block",
      "catchPhrase": "Reverse-engineered explicit synergy",
      "bs": "turn-key drive schemas"
    }
  },
  {
    "id": "96b43a40-35b9-4401-ac7e-3fd597d2c067",
    "name": "Matilde Nicolas",
    "username": "Olin_Ratke27",
    "email": "Roel53@gmail.com",
    "address": {
      "street": "Eryn Port",
      "suite": 88140,
      "city": "Wilfredotown",
      "zipcode": "72709",
      "geo": {
        "lat": "-47.8819",
        "lng": "-55.2039"
      }
    },
    "phone": "(384) 424-2815",
    "website": "imelda.net",
    "company": {
      "name": "Marvin, Swift and Blanda",
      "catchPhrase": "Total intermediate paradigm",
      "bs": "holistic facilitate e-tailers"
    }
  },
  {
    "id": "5f822be5-4ac3-4cfe-9c07-e9f4c390cd4d",
    "name": "Destinee Bergstrom",
    "username": "Kallie55",
    "email": "Dolly_Muller@hotmail.com",
    "address": {
      "street": "Sonny Freeway",
      "suite": 31111,
      "city": "Lake Aaron",
      "zipcode": "78316",
      "geo": {
        "lat": "-2.4245",
        "lng": "-144.2381"
      }
    },
    "phone": "086-653-0046",
    "website": "lucile.info",
    "company": {
      "name": "Johns and Sons",
      "catchPhrase": "Quality-focused clear-thinking collaboration",
      "bs": "mission-critical deploy web services"
    }
  },
  {
    "id": "f62cd5af-ed8b-4a32-bdf6-6a87d4179f90",
    "name": "Pink Jacobs",
    "username": "Bill.Schumm",
    "email": "Kameron29@yahoo.com",
    "address": {
      "street": "Hodkiewicz Green",
      "suite": 49793,
      "city": "Port Skylaville",
      "zipcode": "79948-5998",
      "geo": {
        "lat": "16.0928",
        "lng": "145.7328"
      }
    },
    "phone": "743-350-3997",
    "website": "kellen.info",
    "company": {
      "name": "Bauch - Emard",
      "catchPhrase": "Synergistic optimal task-force",
      "bs": "end-to-end visualize eyeballs"
    }
  }
]
Selected values:
[
  {
    "id": "97da8ef4-f1f9-4f85-a98b-4dfe37225e31",
    "name": "Mayra Cremin",
    "username": "Adell_Wiza6",
    "email": "Presley34@gmail.com",
    "address": {
      "street": "Emerson Mission",
      "suite": 61476,
      "city": "Port Leonardoborough",
      "zipcode": "96486",
      "geo": {
        "lat": "20.3183",
        "lng": "42.0683"
      }
    },
    "phone": "416-924-6548 x735",
    "website": "aiyana.name",
    "company": {
      "name": "Howell - Dibbert",
      "catchPhrase": "Automated holistic complexity",
      "bs": "leading-edge e-enable platforms"
    }
  }
]