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": "f875a526-b5fb-4554-8160-e932b7a926e9",
"name": "Madyson Jacobson",
"username": "Newton_Balistreri",
"email": "Amya55@gmail.com",
"address": {
"street": "Liliana Parkway",
"suite": 95116,
"city": "Tremblayfurt",
"zipcode": "14325-8674",
"geo": {
"lat": "-32.7507",
"lng": "161.2947"
}
},
"phone": "419.768.3174",
"website": "profitable-fatigue.com",
"company": {
"name": "Pfeffer LLC",
"catchPhrase": "Open-source empowering matrix",
"bs": "deliver out-of-the-box models"
}
},
{
"id": "3efb9ca6-72b3-4cd4-af38-03202bbde56c",
"name": "Gino Lemke",
"username": "Destinee_Lesch",
"email": "Camren16@hotmail.com",
"address": {
"street": "Sporer Gateway",
"suite": 13298,
"city": "St. Paul",
"zipcode": "50978",
"geo": {
"lat": "61.1487",
"lng": "-55.3255"
}
},
"phone": "211-463-1706",
"website": "quintessential-machinery.net",
"company": {
"name": "Hodkiewicz and Sons",
"catchPhrase": "Assimilated demand-driven throughput",
"bs": "drive innovative schemas"
}
},
{
"id": "93d9daf9-7bc9-4739-b71f-1f486b241d14",
"name": "Tina Walker",
"username": "Stephan.Stroman41",
"email": "Marietta13@hotmail.com",
"address": {
"street": "Schroeder Squares",
"suite": 96251,
"city": "New Velda",
"zipcode": "41971-9033",
"geo": {
"lat": "-11.7138",
"lng": "28.5393"
}
},
"phone": "(329) 755-5063 x327",
"website": "odd-death.org",
"company": {
"name": "Rice, Murazik and Weimann",
"catchPhrase": "Grass-roots bandwidth-monitored analyzer",
"bs": "innovate dynamic e-commerce"
}
},
{
"id": "879b48cb-7c44-4925-8475-413b97ae4f53",
"name": "Ophelia Rowe",
"username": "Ara30",
"email": "Tobin1@hotmail.com",
"address": {
"street": "Van Fall",
"suite": 57049,
"city": "Wisokybury",
"zipcode": "12247-7207",
"geo": {
"lat": "28.7890",
"lng": "174.3149"
}
},
"phone": "631-675-6192 x2325",
"website": "enchanted-defendant.biz",
"company": {
"name": "Bergstrom - Pacocha",
"catchPhrase": "Pre-emptive bottom-line approach",
"bs": "reinvent 24/7 interfaces"
}
},
{
"id": "d217486a-c878-42de-abdd-0a0e65c4a047",
"name": "Alexys Medhurst",
"username": "Imani.Boehm",
"email": "Edward.Becker2@gmail.com",
"address": {
"street": "Rahsaan Divide",
"suite": 80852,
"city": "East Beau",
"zipcode": "77702-4204",
"geo": {
"lat": "11.5338",
"lng": "150.8093"
}
},
"phone": "605-667-9248",
"website": "blue-hash.name",
"company": {
"name": "Little, Reichel and Runte",
"catchPhrase": "Automated interactive Graphical User Interface",
"bs": "transition ubiquitous partnerships"
}
},
{
"id": "a055f3fe-a93d-4de6-8e05-601c4b26edcf",
"name": "Cordie Heathcote",
"username": "Ezekiel.Balistreri",
"email": "Viola63@hotmail.com",
"address": {
"street": "Chauncey Canyon",
"suite": 23482,
"city": "Ontario",
"zipcode": "23298-4120",
"geo": {
"lat": "-85.4096",
"lng": "6.2972"
}
},
"phone": "347.626.3646 x902",
"website": "right-usher.net",
"company": {
"name": "Bradtke Inc",
"catchPhrase": "Realigned real-time knowledge user",
"bs": "grow viral vortals"
}
},
{
"id": "fa2236f7-f60e-456d-a1fb-970c0c4e1668",
"name": "Hank Bogan",
"username": "Reece82",
"email": "Karl.Kassulke@yahoo.com",
"address": {
"street": "Neva Landing",
"suite": 27831,
"city": "North Rahsaan",
"zipcode": "23692-0521",
"geo": {
"lat": "80.2210",
"lng": "78.9057"
}
},
"phone": "1-623-527-4487",
"website": "fatherly-tutu.com",
"company": {
"name": "Parker - Farrell",
"catchPhrase": "Team-oriented stable local area network",
"bs": "matrix wireless interfaces"
}
},
{
"id": "7bac95a1-8e43-4548-b497-d268520fbf93",
"name": "Marjolaine Gerlach",
"username": "Ramiro_Funk30",
"email": "Russell.Runolfsson@yahoo.com",
"address": {
"street": "Gwendolyn Knolls",
"suite": 22759,
"city": "North Mallory",
"zipcode": "97938-8960",
"geo": {
"lat": "-28.2084",
"lng": "148.2390"
}
},
"phone": "(412) 640-4072",
"website": "unwritten-exhibit.name",
"company": {
"name": "Herzog Group",
"catchPhrase": "Realigned web-enabled policy",
"bs": "visualize leading-edge metrics"
}
},
{
"id": "e2bb4a76-6041-4a86-9f75-7e438adcc92a",
"name": "Hazle Legros",
"username": "Lamar_Torp",
"email": "Jake.Parisian73@yahoo.com",
"address": {
"street": "Bednar Valleys",
"suite": 35472,
"city": "Port Dino",
"zipcode": "25362",
"geo": {
"lat": "87.3085",
"lng": "-133.2619"
}
},
"phone": "(971) 961-0668 x92791",
"website": "focused-spread.biz",
"company": {
"name": "Veum, Strosin and Rempel",
"catchPhrase": "Grass-roots regional framework",
"bs": "recontextualize next-generation content"
}
},
{
"id": "8393c805-51a9-4eae-b8d7-f995c7889f29",
"name": "Audrey Crona",
"username": "Dean_Graham",
"email": "Antonio.Durgan@gmail.com",
"address": {
"street": "Schaden Shores",
"suite": 73228,
"city": "Lake Xavierfort",
"zipcode": "66633",
"geo": {
"lat": "88.0066",
"lng": "106.5674"
}
},
"phone": "(856) 927-4368 x0907",
"website": "wrathful-pentagon.com",
"company": {
"name": "Feest - Weissnat",
"catchPhrase": "Cloned executive project",
"bs": "visualize viral metrics"
}
},
{
"id": "d0def24f-15ae-4e9b-9902-f986dda71f4a",
"name": "Isai Boyle",
"username": "Nasir62",
"email": "Lenny51@hotmail.com",
"address": {
"street": "Jeramy Viaduct",
"suite": 87743,
"city": "Maggiochester",
"zipcode": "87923-9448",
"geo": {
"lat": "-84.2263",
"lng": "163.8032"
}
},
"phone": "831.324.6185 x068",
"website": "greedy-financing.name",
"company": {
"name": "Lehner - Schinner",
"catchPhrase": "Advanced eco-centric knowledge user",
"bs": "incubate 24/7 models"
}
},
{
"id": "eb1ac94e-ca38-4fac-9847-ce7e6c260f69",
"name": "Lexie Botsford",
"username": "Stacey.Nitzsche",
"email": "Nico_Trantow@yahoo.com",
"address": {
"street": "Wolff Locks",
"suite": 78285,
"city": "New Garrison",
"zipcode": "82009-9035",
"geo": {
"lat": "-73.3786",
"lng": "159.5381"
}
},
"phone": "370.624.6274 x5937",
"website": "fast-mate.net",
"company": {
"name": "Rolfson Inc",
"catchPhrase": "Decentralized modular flexibility",
"bs": "revolutionize wireless channels"
}
},
{
"id": "1d652dbd-ce6c-4b4a-a8d6-5bcf269ccdba",
"name": "Caitlyn Rodriguez",
"username": "Fritz_Gutkowski",
"email": "Kale94@gmail.com",
"address": {
"street": "Murazik Brooks",
"suite": 77457,
"city": "West Rhiannonstad",
"zipcode": "58573",
"geo": {
"lat": "-57.1154",
"lng": "31.9057"
}
},
"phone": "225-624-4803",
"website": "silly-umbrella.net",
"company": {
"name": "Schowalter, Ruecker and Miller",
"catchPhrase": "User-friendly national local area network",
"bs": "disintermediate turn-key functionalities"
}
},
{
"id": "cb80df79-516b-4114-8891-af83e2fec12f",
"name": "Maritza Stehr",
"username": "Jesse.Senger50",
"email": "Hilma.Osinski89@gmail.com",
"address": {
"street": "Jamal Skyway",
"suite": 29508,
"city": "South Jalen",
"zipcode": "47197",
"geo": {
"lat": "31.3259",
"lng": "-82.9494"
}
},
"phone": "899.447.2072 x258",
"website": "acidic-gradient.info",
"company": {
"name": "Considine, Hane and Lehner",
"catchPhrase": "Devolved upward-trending internet solution",
"bs": "cultivate web-enabled e-tailers"
}
},
{
"id": "b08ada90-73ee-4d57-a64e-e83f7f5e15ac",
"name": "Will Prohaska",
"username": "Aditya_Hilpert14",
"email": "Cecile.Breitenberg34@hotmail.com",
"address": {
"street": "Brakus Lake",
"suite": 84948,
"city": "North Laverna",
"zipcode": "99269-2795",
"geo": {
"lat": "-34.2159",
"lng": "-152.2112"
}
},
"phone": "744.334.8048 x466",
"website": "bewitched-owl.biz",
"company": {
"name": "Kerluke Inc",
"catchPhrase": "Stand-alone web-enabled standardization",
"bs": "iterate frictionless communities"
}
},
{
"id": "8cb78c9a-ae7e-4b8b-81f4-1519192c5835",
"name": "Carole Jacobi",
"username": "Wayne_Gibson54",
"email": "Emilia_Reichel6@hotmail.com",
"address": {
"street": "Morar Cliff",
"suite": 25092,
"city": "New Roscoe",
"zipcode": "77519-6659",
"geo": {
"lat": "27.9988",
"lng": "-85.9400"
}
},
"phone": "898-732-7087",
"website": "aggravating-veil.info",
"company": {
"name": "Quitzon - Russel",
"catchPhrase": "Robust context-sensitive approach",
"bs": "evolve scalable platforms"
}
},
{
"id": "1529bc64-499b-434a-8af4-38ee0860865f",
"name": "Jimmy Hermiston",
"username": "Cornell99",
"email": "Garland_Batz@gmail.com",
"address": {
"street": "Millie Road",
"suite": 80259,
"city": "Port Frederik",
"zipcode": "39847",
"geo": {
"lat": "78.5170",
"lng": "-68.2139"
}
},
"phone": "231-619-9673",
"website": "shady-context.com",
"company": {
"name": "Feest - Greenholt",
"catchPhrase": "Profit-focused upward-trending focus group",
"bs": "leverage efficient niches"
}
},
{
"id": "54babd22-6aee-4849-b2f8-c691bbe0ad60",
"name": "Janis Rice",
"username": "William76",
"email": "Kaleigh_Hermiston@hotmail.com",
"address": {
"street": "Dibbert Burg",
"suite": 93225,
"city": "Ericahaven",
"zipcode": "12460",
"geo": {
"lat": "66.5032",
"lng": "-156.7219"
}
},
"phone": "1-333-598-0506",
"website": "quarrelsome-maiden.biz",
"company": {
"name": "Adams, Shanahan and Skiles",
"catchPhrase": "Inverse directional projection",
"bs": "empower mission-critical blockchains"
}
},
{
"id": "ce32d9ff-b970-4bf8-894c-0d5e61b255f0",
"name": "Rafael Anderson",
"username": "Jamel8",
"email": "Sister.Langworth@hotmail.com",
"address": {
"street": "Hilpert Forge",
"suite": 11844,
"city": "Norwalk",
"zipcode": "71298-3246",
"geo": {
"lat": "65.5263",
"lng": "-131.7737"
}
},
"phone": "(819) 273-2177 x589",
"website": "distant-interaction.net",
"company": {
"name": "Cronin - Barton",
"catchPhrase": "Expanded human-resource policy",
"bs": "architect B2B interfaces"
}
},
{
"id": "95ec0536-e882-48a0-925e-663ec5cf1315",
"name": "Tristian Parisian",
"username": "Edd62",
"email": "Roxanne_Fahey@hotmail.com",
"address": {
"street": "Schroeder Estate",
"suite": 33396,
"city": "Friesenmouth",
"zipcode": "44325",
"geo": {
"lat": "33.6101",
"lng": "64.6570"
}
},
"phone": "1-251-639-5064",
"website": "worried-convert.biz",
"company": {
"name": "Wolff, Hane and Schuster",
"catchPhrase": "Balanced non-volatile secured line",
"bs": "scale real-time e-markets"
}
},
{
"id": "56614c72-fb9d-44e0-ae45-ce7afeca0fe5",
"name": "Arvid Lind",
"username": "Burnice2",
"email": "Edgardo.Senger@hotmail.com",
"address": {
"street": "Rippin Fork",
"suite": 72818,
"city": "Hattiesburg",
"zipcode": "99589-4805",
"geo": {
"lat": "15.0080",
"lng": "-135.5084"
}
},
"phone": "500-779-9542 x854",
"website": "basic-claw.com",
"company": {
"name": "Bashirian - Koch",
"catchPhrase": "Quality-focused intangible encryption",
"bs": "maximize bricks-and-clicks niches"
}
},
{
"id": "b0253139-7229-4d50-9ff9-1214f9cf9eaa",
"name": "Mathew Moore",
"username": "Kyra.Friesen",
"email": "Alba_Thiel@gmail.com",
"address": {
"street": "Pollich Summit",
"suite": 42772,
"city": "Bridgeport",
"zipcode": "81927",
"geo": {
"lat": "5.3133",
"lng": "-91.0451"
}
},
"phone": "662-896-6139",
"website": "self-reliant-conifer.name",
"company": {
"name": "Murphy, Orn and Sauer",
"catchPhrase": "User-friendly optimizing product",
"bs": "engineer strategic e-commerce"
}
},
{
"id": "899fe4a2-a1da-4033-8658-5d7e6703bb52",
"name": "Broderick Gottlieb",
"username": "Vladimir58",
"email": "Jordy_Wehner@yahoo.com",
"address": {
"street": "Volkman Plaza",
"suite": 85323,
"city": "Malliemouth",
"zipcode": "44713-4193",
"geo": {
"lat": "84.3313",
"lng": "116.1799"
}
},
"phone": "979-520-0193 x88636",
"website": "delicious-style.net",
"company": {
"name": "Parker - Macejkovic",
"catchPhrase": "Function-based local info-mediaries",
"bs": "facilitate viral action-items"
}
},
{
"id": "6eac2c7a-2a41-4c3a-93fd-80ba9e461389",
"name": "Claude Lindgren",
"username": "Ellsworth_Blanda",
"email": "Coy_Cremin@gmail.com",
"address": {
"street": "Alvah Via",
"suite": 97226,
"city": "Castle Rock",
"zipcode": "14793",
"geo": {
"lat": "-28.7006",
"lng": "128.2132"
}
},
"phone": "(848) 872-5016",
"website": "imperturbable-wilderness.com",
"company": {
"name": "Bartoletti, Wiza and Carroll",
"catchPhrase": "Reverse-engineered mission-critical moderator",
"bs": "strategize dynamic applications"
}
},
{
"id": "d7045a38-329e-49e6-b525-2455d33bb14e",
"name": "Tad Wunsch",
"username": "Jermain_Wiegand",
"email": "Ike45@yahoo.com",
"address": {
"street": "Roob Estate",
"suite": 92133,
"city": "Melissafurt",
"zipcode": "17049",
"geo": {
"lat": "-65.5375",
"lng": "-65.6065"
}
},
"phone": "221-704-1762",
"website": "ill-informed-workout.com",
"company": {
"name": "Crona and Sons",
"catchPhrase": "Total client-server local area network",
"bs": "harness plug-and-play content"
}
},
{
"id": "1deeceb2-9e9e-4b14-bec3-c8bb399b0209",
"name": "Arely Von",
"username": "Rebecca.Hand",
"email": "Alva_Padberg93@hotmail.com",
"address": {
"street": "Padberg Mountain",
"suite": 25932,
"city": "Welchmouth",
"zipcode": "94959",
"geo": {
"lat": "28.9340",
"lng": "-150.2621"
}
},
"phone": "(980) 779-3332 x550",
"website": "measly-proposal.com",
"company": {
"name": "Wilderman Inc",
"catchPhrase": "Ameliorated intangible data-warehouse",
"bs": "enable best-of-breed synergies"
}
},
{
"id": "48e87be5-d599-44a1-ba64-81a5b8a8fead",
"name": "Theresa Wiegand",
"username": "Kaley48",
"email": "Olin93@gmail.com",
"address": {
"street": "Weber Tunnel",
"suite": 37818,
"city": "Lake Deltaland",
"zipcode": "70465",
"geo": {
"lat": "79.0541",
"lng": "67.4563"
}
},
"phone": "(237) 359-9761 x26159",
"website": "square-gun.net",
"company": {
"name": "Hayes, Schaden and Auer",
"catchPhrase": "Business-focused regional productivity",
"bs": "reinvent dynamic experiences"
}
},
{
"id": "a55f302a-47f3-474e-8b0e-38982d922842",
"name": "Dana Anderson",
"username": "Kyla.OConner15",
"email": "Paris.Mraz28@gmail.com",
"address": {
"street": "Alvis Lane",
"suite": 20048,
"city": "West Johnny",
"zipcode": "81418",
"geo": {
"lat": "-51.3099",
"lng": "-25.7571"
}
},
"phone": "1-563-309-1376",
"website": "phony-ratio.net",
"company": {
"name": "Beatty Inc",
"catchPhrase": "Cross-platform user-facing intranet",
"bs": "synergize one-to-one users"
}
},
{
"id": "c7f741c1-01b6-4e51-81b9-1fcb24995419",
"name": "Sarah Fisher",
"username": "Robert35",
"email": "Derrick_Marks65@yahoo.com",
"address": {
"street": "Laurie Greens",
"suite": 29095,
"city": "East Jadenstad",
"zipcode": "62628",
"geo": {
"lat": "40.0392",
"lng": "-111.2926"
}
},
"phone": "464.260.7009 x84993",
"website": "minor-pickle.info",
"company": {
"name": "Stokes, Pollich and Swaniawski",
"catchPhrase": "Customer-focused asynchronous structure",
"bs": "revolutionize impactful action-items"
}
},
{
"id": "a5ed61ad-7b15-428d-827d-d2fc097baf9d",
"name": "Annette Schinner",
"username": "Coleman.Denesik73",
"email": "Carmela47@yahoo.com",
"address": {
"street": "Bechtelar Keys",
"suite": 31904,
"city": "Downers Grove",
"zipcode": "87918-5966",
"geo": {
"lat": "89.7605",
"lng": "-90.8213"
}
},
"phone": "(786) 779-0127 x338",
"website": "busy-document.org",
"company": {
"name": "Littel LLC",
"catchPhrase": "Stand-alone real-time collaboration",
"bs": "disintermediate strategic paradigms"
}
}
][
{
"id": "879b48cb-7c44-4925-8475-413b97ae4f53",
"name": "Ophelia Rowe",
"username": "Ara30",
"email": "Tobin1@hotmail.com",
"address": {
"street": "Van Fall",
"suite": 57049,
"city": "Wisokybury",
"zipcode": "12247-7207",
"geo": {
"lat": "28.7890",
"lng": "174.3149"
}
},
"phone": "631-675-6192 x2325",
"website": "enchanted-defendant.biz",
"company": {
"name": "Bergstrom - Pacocha",
"catchPhrase": "Pre-emptive bottom-line approach",
"bs": "reinvent 24/7 interfaces"
}
}
]