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": "61ba389b-98b6-4f42-b903-40d32b3d3e03",
    "name": "Raven Schamberger",
    "username": "Hailie_Streich",
    "email": "Morton33@gmail.com",
    "address": {
      "street": "Fredy Rue",
      "suite": 96729,
      "city": "West Chanellemouth",
      "zipcode": "14092-1810",
      "geo": {
        "lat": "-6.8079",
        "lng": "173.8715"
      }
    },
    "phone": "(304) 002-4744 x81586",
    "website": "carlie.org",
    "company": {
      "name": "Barrows, Cassin and Armstrong",
      "catchPhrase": "Optional foreground parallelism",
      "bs": "B2C whiteboard communities"
    }
  },
  {
    "id": "fd9eeb7c-7e81-40bf-90f7-7bd95962cb71",
    "name": "Sylvia Spinka",
    "username": "Kristian20",
    "email": "Kristina_Schumm64@gmail.com",
    "address": {
      "street": "Marlin Harbor",
      "suite": 26828,
      "city": "West Newton",
      "zipcode": "50005-3114",
      "geo": {
        "lat": "20.5271",
        "lng": "158.4702"
      }
    },
    "phone": "1-210-858-5334 x91192",
    "website": "raleigh.com",
    "company": {
      "name": "Macejkovic, Sipes and Tillman",
      "catchPhrase": "Business-focused bi-directional forecast",
      "bs": "viral target markets"
    }
  },
  {
    "id": "773d912c-fef7-4ccf-a118-98cca58b9a38",
    "name": "Lyda O'Hara",
    "username": "Burnice.Leffler",
    "email": "Clovis.Hegmann78@gmail.com",
    "address": {
      "street": "Darrel Hills",
      "suite": 84303,
      "city": "Port Sofia",
      "zipcode": "15868",
      "geo": {
        "lat": "45.1977",
        "lng": "116.5444"
      }
    },
    "phone": "252.714.5901",
    "website": "cassidy.com",
    "company": {
      "name": "Christiansen LLC",
      "catchPhrase": "Operative real-time flexibility",
      "bs": "next-generation seize models"
    }
  },
  {
    "id": "df7c01e2-187a-44d5-8411-2b4b2df36f4d",
    "name": "Marquis Swaniawski",
    "username": "Rosanna80",
    "email": "Mason.Wiza80@hotmail.com",
    "address": {
      "street": "Werner Road",
      "suite": 42170,
      "city": "New Lafayette",
      "zipcode": "70986-6989",
      "geo": {
        "lat": "18.2429",
        "lng": "-43.9303"
      }
    },
    "phone": "945.613.3950 x4166",
    "website": "nellie.info",
    "company": {
      "name": "Auer, Renner and Strosin",
      "catchPhrase": "User-centric attitude-oriented intranet",
      "bs": "seamless repurpose synergies"
    }
  },
  {
    "id": "f33d0da8-8cff-4ff0-854f-e94d0a667054",
    "name": "Diego Mraz",
    "username": "Stephon_Stehr",
    "email": "Liliane.Ebert@hotmail.com",
    "address": {
      "street": "Douglas Extension",
      "suite": 71693,
      "city": "West Camren",
      "zipcode": "01750",
      "geo": {
        "lat": "-47.8942",
        "lng": "172.0217"
      }
    },
    "phone": "1-873-479-1405 x7692",
    "website": "susan.com",
    "company": {
      "name": "Gutkowski - Spencer",
      "catchPhrase": "User-friendly incremental product",
      "bs": "innovative iterate web services"
    }
  },
  {
    "id": "711d6e05-de57-4a92-ae15-b8041155fb82",
    "name": "Allen Rippin",
    "username": "Darryl56",
    "email": "Joyce.Zieme65@gmail.com",
    "address": {
      "street": "Cora Lane",
      "suite": 79275,
      "city": "Joanyport",
      "zipcode": "77639",
      "geo": {
        "lat": "-55.5030",
        "lng": "-165.6667"
      }
    },
    "phone": "112.240.8768 x14437",
    "website": "jerrod.name",
    "company": {
      "name": "Barton, Franecki and Hayes",
      "catchPhrase": "Function-based foreground analyzer",
      "bs": "turn-key engage metrics"
    }
  },
  {
    "id": "d457c969-3bd6-4569-bb92-67b0578a56b2",
    "name": "Zora Quitzon",
    "username": "Tatum.Bauch",
    "email": "Ruben_Cormier@hotmail.com",
    "address": {
      "street": "Jast Union",
      "suite": 18794,
      "city": "Lake Sterlingmouth",
      "zipcode": "88741",
      "geo": {
        "lat": "-60.4544",
        "lng": "-14.0853"
      }
    },
    "phone": "1-508-605-6728 x877",
    "website": "elizabeth.name",
    "company": {
      "name": "Conroy LLC",
      "catchPhrase": "Synergized stable hardware",
      "bs": "24/7 disintermediate relationships"
    }
  },
  {
    "id": "4ebc6bf9-33c5-463b-a86d-466b058be239",
    "name": "Astrid Swift",
    "username": "Benton96",
    "email": "Derek.Schinner@yahoo.com",
    "address": {
      "street": "Leffler Station",
      "suite": 97785,
      "city": "Schroedermouth",
      "zipcode": "22668",
      "geo": {
        "lat": "15.9782",
        "lng": "176.2885"
      }
    },
    "phone": "(624) 325-1025 x9039",
    "website": "tyrese.net",
    "company": {
      "name": "Moen and Sons",
      "catchPhrase": "Realigned intermediate matrices",
      "bs": "enterprise aggregate networks"
    }
  },
  {
    "id": "f7a28f22-3ff3-44c0-a0ee-eab0f3c1b6bc",
    "name": "Hazle Jacobs",
    "username": "Alycia.Goldner",
    "email": "Manley.Monahan@gmail.com",
    "address": {
      "street": "Aletha Terrace",
      "suite": 21886,
      "city": "Delbertmouth",
      "zipcode": "38720",
      "geo": {
        "lat": "82.3482",
        "lng": "173.8028"
      }
    },
    "phone": "(315) 961-5523 x704",
    "website": "edna.name",
    "company": {
      "name": "Witting - Cole",
      "catchPhrase": "Adaptive actuating infrastructure",
      "bs": "B2C revolutionize paradigms"
    }
  },
  {
    "id": "ed9e232c-7aa8-4f29-835e-dcbf18a6cf93",
    "name": "Aimee Tillman",
    "username": "Lisandro_Ernser4",
    "email": "Delphia48@yahoo.com",
    "address": {
      "street": "Brayan Flat",
      "suite": 54560,
      "city": "Hagenesville",
      "zipcode": "39690-8508",
      "geo": {
        "lat": "62.5624",
        "lng": "-68.5682"
      }
    },
    "phone": "(969) 426-1275 x580",
    "website": "fabiola.org",
    "company": {
      "name": "Doyle, Lowe and Barton",
      "catchPhrase": "Profound 6th generation extranet",
      "bs": "cross-media morph markets"
    }
  },
  {
    "id": "be295bd3-4221-455c-b042-9c676ddfb1f1",
    "name": "Mariana Weber",
    "username": "River13",
    "email": "Ted_Waelchi@gmail.com",
    "address": {
      "street": "Corene Stream",
      "suite": 28961,
      "city": "North Heath",
      "zipcode": "61524",
      "geo": {
        "lat": "32.1545",
        "lng": "-10.1121"
      }
    },
    "phone": "866.763.1482 x3103",
    "website": "jayme.name",
    "company": {
      "name": "Stanton Inc",
      "catchPhrase": "Balanced static internet solution",
      "bs": "vertical monetize infrastructures"
    }
  },
  {
    "id": "72746f49-d555-4d8b-b812-7fbdcf3c1092",
    "name": "Maynard Ankunding",
    "username": "Ralph.Rau",
    "email": "Hettie.Ebert@yahoo.com",
    "address": {
      "street": "Sauer Flat",
      "suite": 67703,
      "city": "Leilamouth",
      "zipcode": "40178-4046",
      "geo": {
        "lat": "88.9875",
        "lng": "-123.2279"
      }
    },
    "phone": "(228) 896-5790 x514",
    "website": "hazel.info",
    "company": {
      "name": "Schmitt - Okuneva",
      "catchPhrase": "Centralized national archive",
      "bs": "ubiquitous aggregate niches"
    }
  },
  {
    "id": "447070e5-88a9-400b-8fbf-2e0667e175e0",
    "name": "Amelia Aufderhar",
    "username": "Helga.Bechtelar9",
    "email": "Anastasia22@gmail.com",
    "address": {
      "street": "Yundt Mall",
      "suite": 61443,
      "city": "Port Alfredaland",
      "zipcode": "69310-7785",
      "geo": {
        "lat": "22.8562",
        "lng": "44.7524"
      }
    },
    "phone": "287-978-8317 x2714",
    "website": "hilma.name",
    "company": {
      "name": "Smith, Hamill and King",
      "catchPhrase": "Integrated neutral conglomeration",
      "bs": "customized synergize e-services"
    }
  },
  {
    "id": "03d9f34a-8880-40c4-a09a-70c8cd777675",
    "name": "Eliza Bahringer",
    "username": "Monte.Bauch22",
    "email": "Ludie_Armstrong@gmail.com",
    "address": {
      "street": "Rolfson Divide",
      "suite": 93956,
      "city": "West Jedediah",
      "zipcode": "46305-8164",
      "geo": {
        "lat": "80.9503",
        "lng": "177.9409"
      }
    },
    "phone": "(417) 597-4091 x746",
    "website": "ruthie.net",
    "company": {
      "name": "Kris, Ritchie and Smith",
      "catchPhrase": "Up-sized responsive neural-net",
      "bs": "seamless benchmark e-tailers"
    }
  },
  {
    "id": "11dc779e-3753-4971-b408-6fd3260473d2",
    "name": "Lois Johnston",
    "username": "Glennie.Ullrich85",
    "email": "Bernadine.Rath@yahoo.com",
    "address": {
      "street": "Cruickshank Court",
      "suite": 55947,
      "city": "Koelpinland",
      "zipcode": "23872-0927",
      "geo": {
        "lat": "-75.6870",
        "lng": "-43.5511"
      }
    },
    "phone": "661-109-8100",
    "website": "viviane.net",
    "company": {
      "name": "Larkin, Kautzer and Hoeger",
      "catchPhrase": "Total national algorithm",
      "bs": "integrated deliver relationships"
    }
  },
  {
    "id": "f8dc9d30-b8af-4eb9-ab4c-be2629fcbe26",
    "name": "Julian Ruecker",
    "username": "Destinee.Halvorson81",
    "email": "Clemmie.Christiansen5@yahoo.com",
    "address": {
      "street": "Gus Estates",
      "suite": 63396,
      "city": "Broderickview",
      "zipcode": "82123",
      "geo": {
        "lat": "-69.1095",
        "lng": "106.8030"
      }
    },
    "phone": "534.644.1377 x6141",
    "website": "vesta.net",
    "company": {
      "name": "Champlin, Stokes and Borer",
      "catchPhrase": "Profound cohesive website",
      "bs": "granular envisioneer portals"
    }
  },
  {
    "id": "0efae607-a44c-4e0f-b7da-9a4895643272",
    "name": "Hannah Wunsch",
    "username": "Isabella78",
    "email": "Daniella_Flatley5@hotmail.com",
    "address": {
      "street": "Santino Walk",
      "suite": 24167,
      "city": "Beattyborough",
      "zipcode": "37750",
      "geo": {
        "lat": "52.9201",
        "lng": "-174.2462"
      }
    },
    "phone": "1-510-366-7900 x16044",
    "website": "burley.biz",
    "company": {
      "name": "Stokes, Rice and Feest",
      "catchPhrase": "Phased coherent algorithm",
      "bs": "sexy matrix methodologies"
    }
  },
  {
    "id": "b0bff55f-a0c8-4e28-8746-2d615e414ab9",
    "name": "Antwon White",
    "username": "Stacey_Torp",
    "email": "Torrance.Walker79@hotmail.com",
    "address": {
      "street": "Nyah Ford",
      "suite": 58964,
      "city": "Lake Libbiefurt",
      "zipcode": "38535-4711",
      "geo": {
        "lat": "46.8744",
        "lng": "-109.1672"
      }
    },
    "phone": "535-457-2824 x49757",
    "website": "vaughn.org",
    "company": {
      "name": "Hansen - Beier",
      "catchPhrase": "Streamlined asynchronous contingency",
      "bs": "back-end orchestrate convergence"
    }
  },
  {
    "id": "6caa6fcf-be98-482a-9f43-273a80f428f8",
    "name": "Madeline Ortiz",
    "username": "Myrna_Windler60",
    "email": "Mckayla_Mohr@yahoo.com",
    "address": {
      "street": "Friesen Keys",
      "suite": 63562,
      "city": "Quentinton",
      "zipcode": "31758-2963",
      "geo": {
        "lat": "-6.6073",
        "lng": "-39.7835"
      }
    },
    "phone": "(991) 649-7369 x254",
    "website": "rollin.org",
    "company": {
      "name": "Marquardt - Stanton",
      "catchPhrase": "Multi-layered incremental help-desk",
      "bs": "out-of-the-box recontextualize e-markets"
    }
  },
  {
    "id": "19c7a30c-5bbf-4672-99b9-a73b9e5806f2",
    "name": "Samantha Altenwerth",
    "username": "Toby_Wintheiser89",
    "email": "Korbin9@gmail.com",
    "address": {
      "street": "Schuyler Greens",
      "suite": 10786,
      "city": "Jedburgh",
      "zipcode": "56051",
      "geo": {
        "lat": "-16.4678",
        "lng": "-100.7244"
      }
    },
    "phone": "(879) 026-1443 x3013",
    "website": "reba.info",
    "company": {
      "name": "Lynch, Blick and Bergstrom",
      "catchPhrase": "Persevering foreground archive",
      "bs": "sexy innovate mindshare"
    }
  },
  {
    "id": "b63b64dc-8a06-4ae7-bda2-cdb6f2d4ddb8",
    "name": "Francis Halvorson",
    "username": "America_Koch",
    "email": "Katarina_DuBuque41@gmail.com",
    "address": {
      "street": "Frederik Drive",
      "suite": 27858,
      "city": "Venafort",
      "zipcode": "67889-9260",
      "geo": {
        "lat": "16.7637",
        "lng": "-130.3492"
      }
    },
    "phone": "509.682.1181 x38485",
    "website": "derrick.net",
    "company": {
      "name": "Dibbert and Sons",
      "catchPhrase": "Automated multimedia portal",
      "bs": "cross-platform evolve synergies"
    }
  },
  {
    "id": "8ac7d559-acbc-4f6a-80e5-e1cf3da803e9",
    "name": "Isac Beatty",
    "username": "Carolyn_Leannon81",
    "email": "Jarrett34@yahoo.com",
    "address": {
      "street": "Kling Ville",
      "suite": 13860,
      "city": "Schultzfort",
      "zipcode": "80640",
      "geo": {
        "lat": "-65.1010",
        "lng": "-176.7891"
      }
    },
    "phone": "(047) 402-2224 x366",
    "website": "ara.net",
    "company": {
      "name": "Ward - Herzog",
      "catchPhrase": "Cross-group maximized leverage",
      "bs": "out-of-the-box exploit technologies"
    }
  },
  {
    "id": "b52cbcdc-e93b-4b6f-89f8-19cd7d5fce8d",
    "name": "Jerald Carter",
    "username": "Hailee.Carter2",
    "email": "Brigitte.Renner@gmail.com",
    "address": {
      "street": "Laury Oval",
      "suite": 84199,
      "city": "Larsonshire",
      "zipcode": "97335-5686",
      "geo": {
        "lat": "56.9344",
        "lng": "46.5744"
      }
    },
    "phone": "1-158-815-5411",
    "website": "anjali.biz",
    "company": {
      "name": "Morar Inc",
      "catchPhrase": "Re-contextualized empowering firmware",
      "bs": "efficient brand web-readiness"
    }
  },
  {
    "id": "6ea06988-3cfe-49ba-8b02-0595328c253f",
    "name": "Roger Lindgren",
    "username": "Alexandro6",
    "email": "Harold79@yahoo.com",
    "address": {
      "street": "Connelly Village",
      "suite": 76665,
      "city": "Port Rachelhaven",
      "zipcode": "50304-4438",
      "geo": {
        "lat": "-43.8385",
        "lng": "176.1025"
      }
    },
    "phone": "(305) 053-9505",
    "website": "luis.info",
    "company": {
      "name": "Larkin Inc",
      "catchPhrase": "Integrated scalable local area network",
      "bs": "innovative utilize relationships"
    }
  },
  {
    "id": "6bab5bb8-8f91-463b-a5f4-d0226941c010",
    "name": "Candelario Schowalter",
    "username": "Kenyon_Daniel",
    "email": "Rosalia_Okuneva20@yahoo.com",
    "address": {
      "street": "Dooley Circle",
      "suite": 48480,
      "city": "Christianhaven",
      "zipcode": "22629",
      "geo": {
        "lat": "-89.3677",
        "lng": "-49.2201"
      }
    },
    "phone": "732.076.6987",
    "website": "luther.biz",
    "company": {
      "name": "Macejkovic, Shields and Osinski",
      "catchPhrase": "Configurable static attitude",
      "bs": "interactive optimize relationships"
    }
  },
  {
    "id": "4daddacd-6fb6-4e03-b8e5-c0094cfcf74f",
    "name": "Andrew Keebler",
    "username": "Brian27",
    "email": "Sandra26@gmail.com",
    "address": {
      "street": "Reilly Circles",
      "suite": 5655,
      "city": "New Norvalbury",
      "zipcode": "01557-9460",
      "geo": {
        "lat": "89.1685",
        "lng": "-84.0589"
      }
    },
    "phone": "031.063.1383",
    "website": "brendon.biz",
    "company": {
      "name": "Weber, Gaylord and Fahey",
      "catchPhrase": "Customer-focused client-server attitude",
      "bs": "leading-edge productize vortals"
    }
  },
  {
    "id": "860bc13c-a3e5-4bba-8cb2-0d36a3f97793",
    "name": "Karley Jacobi",
    "username": "Dillan38",
    "email": "Sofia1@hotmail.com",
    "address": {
      "street": "Walker Unions",
      "suite": 73997,
      "city": "Jerrellburgh",
      "zipcode": "71375",
      "geo": {
        "lat": "18.0374",
        "lng": "-67.0378"
      }
    },
    "phone": "716-775-6630",
    "website": "brando.org",
    "company": {
      "name": "Weimann - Hermann",
      "catchPhrase": "Decentralized non-volatile neural-net",
      "bs": "synergistic engage e-commerce"
    }
  },
  {
    "id": "e28f0259-1fa7-447a-92a9-a64114a3b89b",
    "name": "Krista Turcotte",
    "username": "Geovanny.Lockman96",
    "email": "Margaret24@gmail.com",
    "address": {
      "street": "Jacinthe Extension",
      "suite": 9133,
      "city": "East Bennieland",
      "zipcode": "60955",
      "geo": {
        "lat": "-8.8366",
        "lng": "-109.1152"
      }
    },
    "phone": "208-378-7102 x1470",
    "website": "clyde.name",
    "company": {
      "name": "Funk - Hermann",
      "catchPhrase": "Total hybrid array",
      "bs": "next-generation engineer applications"
    }
  },
  {
    "id": "402095be-f3ea-4147-835b-492acd547ae0",
    "name": "Kirk Roberts",
    "username": "Seth.Marks76",
    "email": "Lolita.Runolfsdottir@yahoo.com",
    "address": {
      "street": "Larson Greens",
      "suite": 49086,
      "city": "North Ollie",
      "zipcode": "74955-1924",
      "geo": {
        "lat": "48.1430",
        "lng": "-63.0112"
      }
    },
    "phone": "382.142.7409",
    "website": "kaylie.com",
    "company": {
      "name": "Barrows Inc",
      "catchPhrase": "Multi-tiered eco-centric success",
      "bs": "compelling deliver metrics"
    }
  },
  {
    "id": "6ce5d824-1973-4daa-bddb-90a275088f6b",
    "name": "Estevan Walsh",
    "username": "Keeley.Kovacek",
    "email": "Rhianna60@gmail.com",
    "address": {
      "street": "Mara Vista",
      "suite": 76593,
      "city": "West Sigurdside",
      "zipcode": "24093",
      "geo": {
        "lat": "3.7941",
        "lng": "-33.8579"
      }
    },
    "phone": "(770) 354-3132 x889",
    "website": "shane.info",
    "company": {
      "name": "Larkin, Lemke and VonRueden",
      "catchPhrase": "Profound tertiary forecast",
      "bs": "global incubate convergence"
    }
  }
]
Selected values:
[
  {
    "id": "df7c01e2-187a-44d5-8411-2b4b2df36f4d",
    "name": "Marquis Swaniawski",
    "username": "Rosanna80",
    "email": "Mason.Wiza80@hotmail.com",
    "address": {
      "street": "Werner Road",
      "suite": 42170,
      "city": "New Lafayette",
      "zipcode": "70986-6989",
      "geo": {
        "lat": "18.2429",
        "lng": "-43.9303"
      }
    },
    "phone": "945.613.3950 x4166",
    "website": "nellie.info",
    "company": {
      "name": "Auer, Renner and Strosin",
      "catchPhrase": "User-centric attitude-oriented intranet",
      "bs": "seamless repurpose synergies"
    }
  }
]