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": "125b8af8-9683-4d42-bcd7-431ec5bb5262",
"name": "Jerad Kautzer",
"username": "Ayla58",
"email": "Lizzie.Bergnaum58@hotmail.com",
"address": {
"street": "Bennett Divide",
"suite": 78490,
"city": "East Kaciport",
"zipcode": "81094-4235",
"geo": {
"lat": "86.3780",
"lng": "112.5641"
}
},
"phone": "909-704-9290",
"website": "probable-kick-off.name",
"company": {
"name": "Paucek, Jerde and Weissnat",
"catchPhrase": "Organized eco-centric analyzer",
"bs": "envisioneer magnetic markets"
}
},
{
"id": "2d0cd373-e046-42e9-8431-e54279b6815e",
"name": "Yessenia Turner",
"username": "Amy87",
"email": "Montana70@gmail.com",
"address": {
"street": "Willard Burg",
"suite": 41646,
"city": "South Benton",
"zipcode": "69938-0772",
"geo": {
"lat": "51.7983",
"lng": "116.2016"
}
},
"phone": "213-282-9074",
"website": "runny-burrito.biz",
"company": {
"name": "Howell - Howell",
"catchPhrase": "Triple-buffered foreground algorithm",
"bs": "revolutionize end-to-end architectures"
}
},
{
"id": "06bb56f5-3bb3-4fbd-bac1-d2f3b8aeb2d7",
"name": "Jared Stroman",
"username": "Adelle44",
"email": "Kendall14@hotmail.com",
"address": {
"street": "Kuvalis Street",
"suite": 92045,
"city": "West Alexstad",
"zipcode": "14054-7370",
"geo": {
"lat": "36.4451",
"lng": "-17.2771"
}
},
"phone": "356-791-0693 x319",
"website": "blue-spouse.biz",
"company": {
"name": "Kessler - Abshire",
"catchPhrase": "Realigned value-added core",
"bs": "architect visionary paradigms"
}
},
{
"id": "cd67ca1e-7906-4c2e-aa8f-5a42402980ac",
"name": "Roman Schamberger",
"username": "Dandre21",
"email": "Lori_Boehm72@yahoo.com",
"address": {
"street": "Aurore Heights",
"suite": 72142,
"city": "Ethelside",
"zipcode": "56357-3626",
"geo": {
"lat": "56.2166",
"lng": "-13.6671"
}
},
"phone": "423.352.7547 x6963",
"website": "paltry-duel.biz",
"company": {
"name": "Torphy Inc",
"catchPhrase": "Phased optimizing capability",
"bs": "exploit rich partnerships"
}
},
{
"id": "4c879f74-74eb-445d-a3f2-fa2f46689d4e",
"name": "Kiera Luettgen",
"username": "Cooper.Balistreri",
"email": "Samson.Hoppe91@hotmail.com",
"address": {
"street": "Arthur Skyway",
"suite": 29330,
"city": "West Lysanne",
"zipcode": "42328-4285",
"geo": {
"lat": "49.1146",
"lng": "-165.4426"
}
},
"phone": "(259) 631-6850 x63986",
"website": "trim-stay.org",
"company": {
"name": "Koch Group",
"catchPhrase": "Reduced upward-trending conglomeration",
"bs": "incentivize web-enabled experiences"
}
},
{
"id": "ad276540-1a3c-4dc8-b93e-0b27fca32488",
"name": "Imani Bode",
"username": "Judah_Raynor",
"email": "Elsie53@gmail.com",
"address": {
"street": "Mitchell Road",
"suite": 23378,
"city": "Mount Pleasant",
"zipcode": "68068-4965",
"geo": {
"lat": "-22.1551",
"lng": "103.1601"
}
},
"phone": "(584) 433-6638 x8543",
"website": "grotesque-half-sister.info",
"company": {
"name": "Murphy - McDermott",
"catchPhrase": "Programmable fault-tolerant algorithm",
"bs": "generate bricks-and-clicks architectures"
}
},
{
"id": "72797c12-73e5-4a83-aafa-f80ef1966f5e",
"name": "Lavina Feeney",
"username": "Rocky_Cormier",
"email": "Billy14@gmail.com",
"address": {
"street": "Kay Lake",
"suite": 52252,
"city": "South Trent",
"zipcode": "44733",
"geo": {
"lat": "41.0330",
"lng": "-169.9350"
}
},
"phone": "278-946-5135 x082",
"website": "unique-hepatitis.org",
"company": {
"name": "Nicolas - Funk",
"catchPhrase": "Secured uniform core",
"bs": "synthesize holistic e-business"
}
},
{
"id": "12d38b22-a661-4326-9989-86b9571f0818",
"name": "Nasir Hermann",
"username": "Lenny_Jenkins",
"email": "Bette_Simonis36@yahoo.com",
"address": {
"street": "Madisyn Spring",
"suite": 50879,
"city": "Kearny",
"zipcode": "79722-4117",
"geo": {
"lat": "18.1612",
"lng": "-88.3092"
}
},
"phone": "278-709-7620 x863",
"website": "wary-stitch.info",
"company": {
"name": "Harris Group",
"catchPhrase": "Fundamental local collaboration",
"bs": "matrix ubiquitous schemas"
}
},
{
"id": "e1e3500f-0956-4408-a7a6-7ead3695bdd8",
"name": "Nicolas Jones",
"username": "Gerald.Leffler82",
"email": "Kaia51@hotmail.com",
"address": {
"street": "Allen Fords",
"suite": 2695,
"city": "North Cydneyton",
"zipcode": "73475-6236",
"geo": {
"lat": "70.7519",
"lng": "68.6347"
}
},
"phone": "1-820-929-6700 x7559",
"website": "humming-rosemary.org",
"company": {
"name": "Hagenes, Vandervort and Witting",
"catchPhrase": "Expanded bi-directional conglomeration",
"bs": "benchmark end-to-end e-business"
}
},
{
"id": "08617851-2d21-4631-a00f-4259cdd5ed1b",
"name": "Elliot Pouros",
"username": "Merl53",
"email": "Cecil.Kerluke24@yahoo.com",
"address": {
"street": "Graciela Valleys",
"suite": 10213,
"city": "Wehnerborough",
"zipcode": "77743",
"geo": {
"lat": "15.5750",
"lng": "87.6189"
}
},
"phone": "(961) 827-1538 x186",
"website": "altruistic-baseball.net",
"company": {
"name": "Shields Group",
"catchPhrase": "Customer-focused demand-driven matrices",
"bs": "mesh global e-business"
}
},
{
"id": "45d6173e-fe05-4d2f-b118-cdedde4ebe1e",
"name": "Jedidiah Dibbert",
"username": "Christy80",
"email": "Garnett_Koepp65@hotmail.com",
"address": {
"street": "Littel View",
"suite": 10494,
"city": "North Alek",
"zipcode": "70645",
"geo": {
"lat": "17.6093",
"lng": "50.5986"
}
},
"phone": "(991) 847-8029",
"website": "failing-whey.name",
"company": {
"name": "Herman - Stroman",
"catchPhrase": "Profit-focused content-based infrastructure",
"bs": "aggregate bleeding-edge action-items"
}
},
{
"id": "863d7340-b553-4d98-a0d1-e3a5d115b17d",
"name": "Arianna Batz",
"username": "Karolann_Satterfield",
"email": "Jamey.Marks@yahoo.com",
"address": {
"street": "Kulas Turnpike",
"suite": 38876,
"city": "Lake Rollin",
"zipcode": "81801",
"geo": {
"lat": "71.0065",
"lng": "-34.2220"
}
},
"phone": "202.645.7484 x4102",
"website": "wrong-elephant.com",
"company": {
"name": "Koepp and Sons",
"catchPhrase": "Distributed 3rd generation challenge",
"bs": "monetize robust e-tailers"
}
},
{
"id": "70d7d442-4d88-4dd7-85ba-ab0c8845c8fb",
"name": "Madge Beer",
"username": "Billie36",
"email": "Yvette27@yahoo.com",
"address": {
"street": "Einar Rest",
"suite": 69332,
"city": "Jaceystad",
"zipcode": "84393",
"geo": {
"lat": "52.0774",
"lng": "83.5787"
}
},
"phone": "890.606.2954",
"website": "clear-jazz.com",
"company": {
"name": "Parisian Group",
"catchPhrase": "Persistent directional parallelism",
"bs": "deploy synergistic networks"
}
},
{
"id": "a4525977-ad8a-4315-b2da-41beaab3423e",
"name": "Heaven Bruen",
"username": "Hillary75",
"email": "Orval.Cremin@hotmail.com",
"address": {
"street": "Toy Forest",
"suite": 60364,
"city": "Kalebberg",
"zipcode": "95173-5376",
"geo": {
"lat": "-17.8712",
"lng": "-164.1906"
}
},
"phone": "1-461-468-7547 x70034",
"website": "optimal-snake.org",
"company": {
"name": "Reichel - Wiza",
"catchPhrase": "Proactive systemic Graphic Interface",
"bs": "implement robust convergence"
}
},
{
"id": "fc80954e-258a-4398-81ed-d1a9a989eaf7",
"name": "Wilhelmine West",
"username": "Blaise_Green3",
"email": "Violet31@hotmail.com",
"address": {
"street": "Rice Shoals",
"suite": 75748,
"city": "Port Zionburgh",
"zipcode": "87785",
"geo": {
"lat": "70.0561",
"lng": "-22.8736"
}
},
"phone": "497-733-0679 x8747",
"website": "prize-freedom.name",
"company": {
"name": "Lesch, Friesen and Muller",
"catchPhrase": "Exclusive homogeneous superstructure",
"bs": "reinvent extensible web-readiness"
}
},
{
"id": "c225e5f3-93e9-4368-abea-1bc96f1d5652",
"name": "Birdie Pfannerstill",
"username": "Kailee.Jacobi59",
"email": "Kyla.Boyle91@hotmail.com",
"address": {
"street": "Deckow Pass",
"suite": 94345,
"city": "Iowa City",
"zipcode": "63966",
"geo": {
"lat": "-5.7794",
"lng": "163.6952"
}
},
"phone": "576-650-8700",
"website": "athletic-chit-chat.com",
"company": {
"name": "Bins Group",
"catchPhrase": "Ergonomic systemic neural-net",
"bs": "embrace real-time infomediaries"
}
},
{
"id": "306e0f0c-2ae0-496b-b739-492c169990f8",
"name": "Jackson Casper",
"username": "Ramona.OConnell",
"email": "Dina.Cartwright72@gmail.com",
"address": {
"street": "Nella Wall",
"suite": 33483,
"city": "Walkerton",
"zipcode": "89380",
"geo": {
"lat": "-42.5654",
"lng": "-10.3074"
}
},
"phone": "(810) 483-4977",
"website": "empty-pound.name",
"company": {
"name": "Dach - Wolff",
"catchPhrase": "Reactive cohesive utilisation",
"bs": "redefine compelling partnerships"
}
},
{
"id": "97ce0e2d-ee5c-4853-a7d8-e1ae10e52a51",
"name": "Tess Cronin",
"username": "Valentina.Effertz19",
"email": "Bartholome.Schultz65@yahoo.com",
"address": {
"street": "Nolan Glens",
"suite": 74785,
"city": "Andyside",
"zipcode": "34327-8860",
"geo": {
"lat": "-52.9096",
"lng": "-177.4004"
}
},
"phone": "557.489.7624 x956",
"website": "untidy-tenant.name",
"company": {
"name": "Ernser Inc",
"catchPhrase": "Multi-layered secondary encryption",
"bs": "reinvent scalable platforms"
}
},
{
"id": "3808b11a-9e4c-4cbd-8c0b-cf8c4b3d7463",
"name": "Darrell Quigley",
"username": "Sheldon72",
"email": "Easter.Wiegand96@gmail.com",
"address": {
"street": "Keeley Fords",
"suite": 89032,
"city": "West Pablo",
"zipcode": "82347-3211",
"geo": {
"lat": "77.7781",
"lng": "-161.6321"
}
},
"phone": "462-267-2499 x197",
"website": "favorable-fine.name",
"company": {
"name": "Kirlin - Brown",
"catchPhrase": "Re-engineered optimal instruction set",
"bs": "benchmark 24/7 relationships"
}
},
{
"id": "916e9d4c-86e0-4d14-b454-0feede865749",
"name": "Easter Beahan",
"username": "Ronaldo_Mills59",
"email": "Ulises_Hagenes76@hotmail.com",
"address": {
"street": "Zemlak Pike",
"suite": 2541,
"city": "Lake Colten",
"zipcode": "01606-4006",
"geo": {
"lat": "-29.3175",
"lng": "158.2226"
}
},
"phone": "(265) 817-3044",
"website": "paltry-explosion.com",
"company": {
"name": "O'Keefe and Sons",
"catchPhrase": "Synergized 3rd generation capacity",
"bs": "matrix end-to-end functionalities"
}
},
{
"id": "100eb440-75fc-4f43-ad17-708c6668eb69",
"name": "Bethany Fadel",
"username": "Ona.Watsica9",
"email": "Julius.Kihn68@yahoo.com",
"address": {
"street": "Wyman Club",
"suite": 21137,
"city": "East Mylenechester",
"zipcode": "79112-5617",
"geo": {
"lat": "1.4312",
"lng": "-52.5030"
}
},
"phone": "1-588-435-5701 x742",
"website": "blank-promenade.net",
"company": {
"name": "Mertz, Carroll and Marks",
"catchPhrase": "Sharable empowering methodology",
"bs": "synthesize vertical markets"
}
},
{
"id": "ec4bebf6-199a-4566-a103-0111327139fd",
"name": "Zackary Wiegand",
"username": "Raymundo_Haley61",
"email": "Garrett_Murray@yahoo.com",
"address": {
"street": "Kub Gardens",
"suite": 44837,
"city": "Bartlett",
"zipcode": "01614",
"geo": {
"lat": "-3.7272",
"lng": "-84.8863"
}
},
"phone": "1-802-265-2206 x998",
"website": "male-racism.biz",
"company": {
"name": "Renner - Brekke",
"catchPhrase": "Enterprise-wide logistical functionalities",
"bs": "iterate magnetic e-business"
}
},
{
"id": "8535d7f7-1bfd-4ebd-9a5d-030c59567c3c",
"name": "Ofelia Corkery",
"username": "Reba_Morar",
"email": "Mathew.Prosacco67@yahoo.com",
"address": {
"street": "Daniel Isle",
"suite": 61606,
"city": "Port Hoseaborough",
"zipcode": "40250-7251",
"geo": {
"lat": "-77.5649",
"lng": "132.6996"
}
},
"phone": "(953) 965-0019 x354",
"website": "ringed-horst.name",
"company": {
"name": "Weissnat, Dietrich and Homenick",
"catchPhrase": "Integrated national algorithm",
"bs": "unleash sexy mindshare"
}
},
{
"id": "f1ac81bb-379f-4207-871b-7e82076997f5",
"name": "Marge Kovacek",
"username": "Kariane27",
"email": "Cleo.Gulgowski@hotmail.com",
"address": {
"street": "Balistreri Path",
"suite": 68286,
"city": "Mosciskiburgh",
"zipcode": "73825",
"geo": {
"lat": "-83.1794",
"lng": "-171.6880"
}
},
"phone": "273-569-9471 x66136",
"website": "ignorant-havoc.info",
"company": {
"name": "Turner - Jacobi",
"catchPhrase": "Mandatory directional installation",
"bs": "optimize B2B infomediaries"
}
},
{
"id": "8c136f6c-d3a7-46d1-afb7-393efccbc4c7",
"name": "Fleta Bartoletti",
"username": "Shyann22",
"email": "Johnathon_Hammes@gmail.com",
"address": {
"street": "Mara Underpass",
"suite": 31281,
"city": "Shirleyton",
"zipcode": "27508",
"geo": {
"lat": "10.4997",
"lng": "-20.2320"
}
},
"phone": "210.380.6678",
"website": "mediocre-epoxy.com",
"company": {
"name": "Hauck - Runolfsdottir",
"catchPhrase": "Visionary needs-based extranet",
"bs": "synthesize intuitive infomediaries"
}
},
{
"id": "1fb16ae9-8ece-49c2-977d-4fac7f9d0d5b",
"name": "Gilberto Gutmann",
"username": "Marquise2",
"email": "Dewayne63@hotmail.com",
"address": {
"street": "Reichel Crossroad",
"suite": 87249,
"city": "Muncie",
"zipcode": "29776-1686",
"geo": {
"lat": "-48.7657",
"lng": "-49.2849"
}
},
"phone": "1-768-462-1349",
"website": "usable-closure.biz",
"company": {
"name": "Sawayn - Moen",
"catchPhrase": "Front-line demand-driven support",
"bs": "deploy viral partnerships"
}
},
{
"id": "ea440f8d-b0a7-4634-b49b-a0584d1dc782",
"name": "Barrett Kub",
"username": "Colin.Harvey",
"email": "Nicole49@yahoo.com",
"address": {
"street": "McCullough Orchard",
"suite": 80530,
"city": "Newark",
"zipcode": "38571-6255",
"geo": {
"lat": "69.5059",
"lng": "73.7360"
}
},
"phone": "339.323.9743",
"website": "infatuated-pup.com",
"company": {
"name": "Mante - McKenzie",
"catchPhrase": "Customizable global product",
"bs": "incentivize dynamic functionalities"
}
},
{
"id": "228036a4-fcdf-4927-94f8-6f14a82f4a0c",
"name": "Breanna Daniel",
"username": "Arnold30",
"email": "Zack.Rogahn47@gmail.com",
"address": {
"street": "Kozey Run",
"suite": 74697,
"city": "South Ariel",
"zipcode": "17208",
"geo": {
"lat": "19.7879",
"lng": "-41.9131"
}
},
"phone": "922-419-7171 x0446",
"website": "beautiful-bestseller.info",
"company": {
"name": "Watsica - Stokes",
"catchPhrase": "Open-source bandwidth-monitored moratorium",
"bs": "cultivate granular action-items"
}
},
{
"id": "06198163-814b-4cae-b7c9-5b9baa5e87a8",
"name": "Marisa Hansen",
"username": "Cleo.Lesch",
"email": "Amiya69@yahoo.com",
"address": {
"street": "Noe Fords",
"suite": 21467,
"city": "Levittown",
"zipcode": "95034-0453",
"geo": {
"lat": "-54.6768",
"lng": "-43.5280"
}
},
"phone": "265.715.9309",
"website": "bustling-bit.info",
"company": {
"name": "Robel - Emard",
"catchPhrase": "Open-source directional superstructure",
"bs": "matrix magnetic users"
}
},
{
"id": "53b93189-8e33-46b0-bc76-877f7269f96d",
"name": "Rick Schaden",
"username": "Meta26",
"email": "Frank48@yahoo.com",
"address": {
"street": "Haley Prairie",
"suite": 67940,
"city": "North Marcelinatown",
"zipcode": "31945",
"geo": {
"lat": "8.1144",
"lng": "-18.4860"
}
},
"phone": "390-397-5548",
"website": "pungent-poster.name",
"company": {
"name": "Gorczany Inc",
"catchPhrase": "Self-enabling explicit attitude",
"bs": "optimize dynamic e-services"
}
}
][
{
"id": "cd67ca1e-7906-4c2e-aa8f-5a42402980ac",
"name": "Roman Schamberger",
"username": "Dandre21",
"email": "Lori_Boehm72@yahoo.com",
"address": {
"street": "Aurore Heights",
"suite": 72142,
"city": "Ethelside",
"zipcode": "56357-3626",
"geo": {
"lat": "56.2166",
"lng": "-13.6671"
}
},
"phone": "423.352.7547 x6963",
"website": "paltry-duel.biz",
"company": {
"name": "Torphy Inc",
"catchPhrase": "Phased optimizing capability",
"bs": "exploit rich partnerships"
}
}
]