v4.11.2

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
Close dropdown on click input
Custom color
Dropdown position
Dropdown Height:
Dropdown direction
Add placeholder:
Search by field:
Label field:
Value field:

Options:
[
  {
    "id": "62756c3c-2918-4bd7-a07f-43fc73af5c87",
    "name": "Clair Stark",
    "username": "Maxie.Ward",
    "email": "Korey_Monahan25@hotmail.com",
    "address": {
      "street": "Lew View",
      "suite": 47900,
      "city": "Frederiqueview",
      "zipcode": "33645-7088",
      "geo": {
        "lat": "33.0548",
        "lng": "-132.8900"
      }
    },
    "phone": "569.998.3437",
    "website": "palatable-alligator.org",
    "company": {
      "name": "Maggio Inc",
      "catchPhrase": "Devolved interactive methodology",
      "bs": "architect sticky convergence"
    }
  },
  {
    "id": "6ff7428d-c2ac-45f1-a6c0-6559670012c0",
    "name": "Layne Roob",
    "username": "Cornell67",
    "email": "Ambrose_Purdy@gmail.com",
    "address": {
      "street": "Sincere Estates",
      "suite": 36355,
      "city": "South Hill",
      "zipcode": "59559",
      "geo": {
        "lat": "-12.2884",
        "lng": "-116.2911"
      }
    },
    "phone": "1-639-883-8668 x3462",
    "website": "sudden-lashes.name",
    "company": {
      "name": "Crooks Inc",
      "catchPhrase": "Diverse even-keeled local area network",
      "bs": "deliver revolutionary niches"
    }
  },
  {
    "id": "c986c09d-87ee-48d6-9a44-a97c070dc75a",
    "name": "Bernhard White",
    "username": "Lafayette_Franey",
    "email": "Camden_Will@yahoo.com",
    "address": {
      "street": "Zboncak Valley",
      "suite": 44169,
      "city": "Port Hannahbury",
      "zipcode": "46293",
      "geo": {
        "lat": "-52.0701",
        "lng": "55.2864"
      }
    },
    "phone": "592.538.3651 x3935",
    "website": "smart-comfort.biz",
    "company": {
      "name": "Mante - Daugherty",
      "catchPhrase": "Robust multimedia knowledge user",
      "bs": "evolve front-end channels"
    }
  },
  {
    "id": "0e432f6f-7b9a-4170-935d-a3266ca65795",
    "name": "Estrella Gislason",
    "username": "Kyla_Kuhn",
    "email": "Kris73@yahoo.com",
    "address": {
      "street": "Brain Run",
      "suite": 45425,
      "city": "South Nedra",
      "zipcode": "16898-4760",
      "geo": {
        "lat": "-59.6555",
        "lng": "95.8670"
      }
    },
    "phone": "(899) 830-6771",
    "website": "well-lit-catalysis.name",
    "company": {
      "name": "Considine LLC",
      "catchPhrase": "Innovative bifurcated knowledge user",
      "bs": "unleash plug-and-play eyeballs"
    }
  },
  {
    "id": "eff2f3a3-4f89-4c37-95d4-2e86da2be765",
    "name": "Rasheed Cruickshank",
    "username": "Elenora.Littel",
    "email": "Providenci_Larson94@hotmail.com",
    "address": {
      "street": "Reynolds Hollow",
      "suite": 18726,
      "city": "Bergstromchester",
      "zipcode": "48453",
      "geo": {
        "lat": "58.7387",
        "lng": "-172.8125"
      }
    },
    "phone": "925.907.4535",
    "website": "enormous-rainbow.name",
    "company": {
      "name": "Oberbrunner, Williamson and Herzog",
      "catchPhrase": "Fundamental value-added system engine",
      "bs": "repurpose clicks-and-mortar web-readiness"
    }
  },
  {
    "id": "913666ea-5620-49d0-b219-62418679b3e1",
    "name": "Abigail Rath",
    "username": "Katharina.Weissnat76",
    "email": "Magdalena89@hotmail.com",
    "address": {
      "street": "Ciara Forge",
      "suite": 21727,
      "city": "Chaneltown",
      "zipcode": "63520-2941",
      "geo": {
        "lat": "-72.8325",
        "lng": "-102.1766"
      }
    },
    "phone": "(558) 264-3711 x5321",
    "website": "unrealistic-unique.biz",
    "company": {
      "name": "Zemlak Group",
      "catchPhrase": "Advanced 4th generation superstructure",
      "bs": "transition scalable synergies"
    }
  },
  {
    "id": "11f27629-6fc5-446a-85ff-b0bda6585c4c",
    "name": "Dillon Murphy",
    "username": "Hulda38",
    "email": "Karianne29@hotmail.com",
    "address": {
      "street": "Ottilie Canyon",
      "suite": 37203,
      "city": "Lacey",
      "zipcode": "05425",
      "geo": {
        "lat": "6.4753",
        "lng": "33.9295"
      }
    },
    "phone": "355-772-4399",
    "website": "tasty-sequence.org",
    "company": {
      "name": "D'Amore - Schowalter",
      "catchPhrase": "Object-based actuating synergy",
      "bs": "orchestrate 24/365 functionalities"
    }
  },
  {
    "id": "77048378-cb54-4800-9728-996dd99920e4",
    "name": "Boyd Hammes",
    "username": "Noelia.Rolfson98",
    "email": "Marjolaine_Borer@yahoo.com",
    "address": {
      "street": "Gianni Parkways",
      "suite": 81980,
      "city": "Lexington-Fayette",
      "zipcode": "29855",
      "geo": {
        "lat": "89.2776",
        "lng": "22.0153"
      }
    },
    "phone": "1-683-556-0846 x932",
    "website": "conventional-grain.biz",
    "company": {
      "name": "Okuneva, Corwin and Conroy",
      "catchPhrase": "Function-based homogeneous frame",
      "bs": "architect cross-media systems"
    }
  },
  {
    "id": "9078d831-c19d-4393-9e90-e2104b357c37",
    "name": "Alyson O'Kon",
    "username": "Verona92",
    "email": "Ricardo.Zieme12@yahoo.com",
    "address": {
      "street": "Will Way",
      "suite": 96615,
      "city": "Connfurt",
      "zipcode": "28318-7676",
      "geo": {
        "lat": "53.3648",
        "lng": "112.1343"
      }
    },
    "phone": "1-542-231-1139 x414",
    "website": "vacant-health.info",
    "company": {
      "name": "Connelly, Zulauf and Oberbrunner",
      "catchPhrase": "Fundamental actuating knowledge base",
      "bs": "cultivate robust portals"
    }
  },
  {
    "id": "06c43061-daea-44d5-aea6-6863220631cc",
    "name": "Colten Bartoletti",
    "username": "Nathen.Thiel",
    "email": "Felton69@gmail.com",
    "address": {
      "street": "Amani Garden",
      "suite": 45534,
      "city": "South Benedictstad",
      "zipcode": "32523",
      "geo": {
        "lat": "23.2728",
        "lng": "-109.8762"
      }
    },
    "phone": "796.247.5880 x862",
    "website": "scientific-eviction.org",
    "company": {
      "name": "Schimmel - Heaney",
      "catchPhrase": "Upgradable homogeneous groupware",
      "bs": "harness collaborative communities"
    }
  },
  {
    "id": "d84ce58c-d963-4030-a492-77d3844be01a",
    "name": "Rosalia Kris",
    "username": "Irving23",
    "email": "Evalyn.Frami55@gmail.com",
    "address": {
      "street": "Daija Keys",
      "suite": 12914,
      "city": "Livermore",
      "zipcode": "27548",
      "geo": {
        "lat": "40.4839",
        "lng": "20.8302"
      }
    },
    "phone": "1-561-671-1441 x6273",
    "website": "able-oatmeal.org",
    "company": {
      "name": "Schiller Inc",
      "catchPhrase": "Networked uniform emulation",
      "bs": "harness front-end e-markets"
    }
  },
  {
    "id": "0a879ff2-250b-461b-8472-99720d1f9e5f",
    "name": "Jorge Parisian",
    "username": "Princess86",
    "email": "Benedict36@yahoo.com",
    "address": {
      "street": "Creola Place",
      "suite": 78551,
      "city": "Osvaldofurt",
      "zipcode": "87328",
      "geo": {
        "lat": "-46.6861",
        "lng": "42.4140"
      }
    },
    "phone": "(782) 512-3551 x8564",
    "website": "cooperative-sake.info",
    "company": {
      "name": "Miller - Ankunding",
      "catchPhrase": "Re-contextualized explicit matrices",
      "bs": "brand proactive synergies"
    }
  },
  {
    "id": "5ab69335-f07f-4f34-8c54-1515948f6d8f",
    "name": "Keshawn Veum",
    "username": "Dustin73",
    "email": "Nona.Kilback@yahoo.com",
    "address": {
      "street": "Deanna Glens",
      "suite": 55408,
      "city": "West Efren",
      "zipcode": "54927-9787",
      "geo": {
        "lat": "-21.7501",
        "lng": "7.8872"
      }
    },
    "phone": "1-971-207-6230",
    "website": "wee-fork.org",
    "company": {
      "name": "Murazik - Hodkiewicz",
      "catchPhrase": "Inverse bi-directional hub",
      "bs": "target 24/7 functionalities"
    }
  },
  {
    "id": "6aa9aec8-40b3-4319-8dc4-e4d9fc20080a",
    "name": "Celestino Farrell",
    "username": "Pascale_Kautzer31",
    "email": "Deshaun_Gutmann@gmail.com",
    "address": {
      "street": "Orn Radial",
      "suite": 72811,
      "city": "Hermannhaven",
      "zipcode": "79138-0097",
      "geo": {
        "lat": "-15.9649",
        "lng": "-160.4513"
      }
    },
    "phone": "254.997.4878 x328",
    "website": "blaring-announcement.com",
    "company": {
      "name": "Rice LLC",
      "catchPhrase": "Proactive executive adapter",
      "bs": "repurpose 24/7 e-business"
    }
  },
  {
    "id": "6b5f9bd6-1084-46c0-889b-b1a4411abec9",
    "name": "Jacky Deckow",
    "username": "Aimee17",
    "email": "Citlalli_Rath@yahoo.com",
    "address": {
      "street": "Ocie Cliff",
      "suite": 91532,
      "city": "Harveyton",
      "zipcode": "41163-2793",
      "geo": {
        "lat": "-4.7983",
        "lng": "1.7790"
      }
    },
    "phone": "(482) 961-4165",
    "website": "questionable-completion.name",
    "company": {
      "name": "Yost, Hoppe and Schamberger",
      "catchPhrase": "Synchronised stable concept",
      "bs": "incentivize 24/7 applications"
    }
  },
  {
    "id": "158eaddb-6a0e-4562-b91e-755196cbaf92",
    "name": "Charlene Aufderhar",
    "username": "Brain_Leffler70",
    "email": "Louvenia.Bednar47@hotmail.com",
    "address": {
      "street": "Reyes Rest",
      "suite": 94100,
      "city": "Novi",
      "zipcode": "25764-4471",
      "geo": {
        "lat": "65.5660",
        "lng": "-23.2413"
      }
    },
    "phone": "(781) 234-0484 x428",
    "website": "rotating-llama.name",
    "company": {
      "name": "Sporer - Stiedemann",
      "catchPhrase": "Enhanced grid-enabled success",
      "bs": "enable impactful communities"
    }
  },
  {
    "id": "e9f895e4-cf13-4681-a71a-ee1f92d004a6",
    "name": "Annabel Abernathy",
    "username": "Claudia87",
    "email": "Kailey14@yahoo.com",
    "address": {
      "street": "Gutmann Haven",
      "suite": 96911,
      "city": "New Aleentown",
      "zipcode": "88726",
      "geo": {
        "lat": "61.2474",
        "lng": "-68.1782"
      }
    },
    "phone": "(540) 607-4407",
    "website": "negative-antler.info",
    "company": {
      "name": "Maggio - Fisher",
      "catchPhrase": "Organic attitude-oriented time-frame",
      "bs": "strategize revolutionary infrastructures"
    }
  },
  {
    "id": "a12a6f31-952c-4b5e-800b-a5dd06137a4b",
    "name": "Lazaro Moen",
    "username": "Jovani94",
    "email": "Cade44@yahoo.com",
    "address": {
      "street": "Schuster Springs",
      "suite": 24388,
      "city": "Leuschkemouth",
      "zipcode": "97853-2004",
      "geo": {
        "lat": "-28.1068",
        "lng": "21.5793"
      }
    },
    "phone": "853-708-4237",
    "website": "flickering-inhibitor.com",
    "company": {
      "name": "Mann, Dooley and Runolfsson",
      "catchPhrase": "Enhanced bi-directional analyzer",
      "bs": "unleash extensible initiatives"
    }
  },
  {
    "id": "fb85a12c-e1ae-43ec-bdf1-dc69c8508b3d",
    "name": "Andy O'Hara",
    "username": "Devin_Streich24",
    "email": "Cecilia62@gmail.com",
    "address": {
      "street": "Brown Locks",
      "suite": 27946,
      "city": "Steuberside",
      "zipcode": "61707",
      "geo": {
        "lat": "14.8521",
        "lng": "32.5268"
      }
    },
    "phone": "350.416.0293",
    "website": "boring-guilty.name",
    "company": {
      "name": "Emmerich Inc",
      "catchPhrase": "Proactive secondary firmware",
      "bs": "disintermediate end-to-end eyeballs"
    }
  },
  {
    "id": "86b9a7fc-4f3b-4f46-9967-624775eb7ee0",
    "name": "Annalise Pouros",
    "username": "Aliza_Braun74",
    "email": "Sincere55@hotmail.com",
    "address": {
      "street": "Noe Spurs",
      "suite": 17696,
      "city": "Lake Kirstinfurt",
      "zipcode": "66806",
      "geo": {
        "lat": "70.5069",
        "lng": "-145.8222"
      }
    },
    "phone": "336.599.0206 x49614",
    "website": "acclaimed-heart-throb.biz",
    "company": {
      "name": "Ondricka Group",
      "catchPhrase": "Seamless 24 hour moderator",
      "bs": "matrix cross-platform platforms"
    }
  },
  {
    "id": "95645cac-2f0c-407b-bd0f-9fcccfc96aea",
    "name": "Nova Dicki",
    "username": "Roderick7",
    "email": "Audie_Kihn@hotmail.com",
    "address": {
      "street": "Wisoky Street",
      "suite": 52711,
      "city": "West Junius",
      "zipcode": "92009-6799",
      "geo": {
        "lat": "88.5486",
        "lng": "154.3577"
      }
    },
    "phone": "1-747-311-1833 x9997",
    "website": "determined-notebook.com",
    "company": {
      "name": "Walker - Raynor",
      "catchPhrase": "Robust holistic leverage",
      "bs": "maximize dot-com applications"
    }
  },
  {
    "id": "01f925bf-0360-4656-a006-c2ba0880a386",
    "name": "Tanya Marvin",
    "username": "Sydnee55",
    "email": "Edythe_Klocko68@hotmail.com",
    "address": {
      "street": "Jesus Route",
      "suite": 80873,
      "city": "Port Inestown",
      "zipcode": "50394",
      "geo": {
        "lat": "-27.9492",
        "lng": "-82.7614"
      }
    },
    "phone": "1-673-491-5855 x1042",
    "website": "descriptive-cleft.net",
    "company": {
      "name": "MacGyver - Hand",
      "catchPhrase": "User-friendly full-range circuit",
      "bs": "synthesize enterprise ROI"
    }
  },
  {
    "id": "360a0dd0-064f-46d4-8bac-b5062c27cb25",
    "name": "Maia Nicolas",
    "username": "Vincenzo_Wolff3",
    "email": "Maybell10@yahoo.com",
    "address": {
      "street": "Enrique Well",
      "suite": 69982,
      "city": "Erashire",
      "zipcode": "45137",
      "geo": {
        "lat": "-27.0708",
        "lng": "157.0580"
      }
    },
    "phone": "365.391.2217",
    "website": "noisy-fashion.name",
    "company": {
      "name": "Gislason - Rutherford",
      "catchPhrase": "Enterprise-wide fresh-thinking encryption",
      "bs": "exploit end-to-end portals"
    }
  },
  {
    "id": "38fda576-bfa6-4c9b-85d4-508a8e1bfefe",
    "name": "Gerda Hermann",
    "username": "Lily96",
    "email": "Melissa.Stiedemann94@hotmail.com",
    "address": {
      "street": "Constantin Fall",
      "suite": 15664,
      "city": "South Mckayla",
      "zipcode": "78336",
      "geo": {
        "lat": "86.7559",
        "lng": "-110.9246"
      }
    },
    "phone": "(997) 946-5149 x112",
    "website": "thorny-council.com",
    "company": {
      "name": "Bogisich and Sons",
      "catchPhrase": "Right-sized mission-critical functionalities",
      "bs": "synthesize seamless e-tailers"
    }
  },
  {
    "id": "2431837e-7562-49c8-a9c6-934257acde26",
    "name": "Cali Auer",
    "username": "Valentine_Gorczany",
    "email": "Evan_Wehner16@hotmail.com",
    "address": {
      "street": "Kutch Prairie",
      "suite": 49497,
      "city": "Wesley Chapel",
      "zipcode": "87393-1349",
      "geo": {
        "lat": "46.4740",
        "lng": "-141.9520"
      }
    },
    "phone": "(573) 810-8334 x853",
    "website": "guilty-atom.name",
    "company": {
      "name": "Lang LLC",
      "catchPhrase": "Future-proofed asynchronous open system",
      "bs": "transition magnetic applications"
    }
  },
  {
    "id": "b20c61f9-9ea0-4b8c-98f3-55ef14b50459",
    "name": "Lesley Bechtelar",
    "username": "Buck_Cormier",
    "email": "Kelton_Welch@hotmail.com",
    "address": {
      "street": "Danielle Turnpike",
      "suite": 2089,
      "city": "New Estelfurt",
      "zipcode": "25949",
      "geo": {
        "lat": "-86.3686",
        "lng": "93.0084"
      }
    },
    "phone": "392-648-7224",
    "website": "slow-cope.com",
    "company": {
      "name": "Jones Group",
      "catchPhrase": "Devolved regional matrices",
      "bs": "mesh cutting-edge infrastructures"
    }
  },
  {
    "id": "a0b60122-e628-4d79-8be8-f0a509924559",
    "name": "Moises Ledner",
    "username": "Erica_Will",
    "email": "Andrew_Ankunding62@hotmail.com",
    "address": {
      "street": "Meghan Way",
      "suite": 14560,
      "city": "Lake Lavina",
      "zipcode": "19488",
      "geo": {
        "lat": "84.0379",
        "lng": "-73.2312"
      }
    },
    "phone": "(311) 746-2117 x24996",
    "website": "hopeful-trooper.com",
    "company": {
      "name": "Wehner - Shanahan",
      "catchPhrase": "Persistent demand-driven architecture",
      "bs": "engineer efficient infomediaries"
    }
  },
  {
    "id": "8f5e3950-a531-40ff-9e9a-e0c73629964a",
    "name": "William Buckridge",
    "username": "Flo98",
    "email": "Alvah41@hotmail.com",
    "address": {
      "street": "Schmidt Stravenue",
      "suite": 50251,
      "city": "Salem",
      "zipcode": "59366-5110",
      "geo": {
        "lat": "-23.3950",
        "lng": "37.8102"
      }
    },
    "phone": "1-303-940-0802 x8672",
    "website": "creepy-burning.com",
    "company": {
      "name": "Ritchie and Sons",
      "catchPhrase": "De-engineered fault-tolerant initiative",
      "bs": "enhance magnetic convergence"
    }
  },
  {
    "id": "3ab7b59d-bbe6-4893-a72c-463c559d12da",
    "name": "Agustin Ankunding",
    "username": "Tommie_Schoen37",
    "email": "Tavares_Nikolaus@gmail.com",
    "address": {
      "street": "Block Meadows",
      "suite": 49024,
      "city": "Lawrence",
      "zipcode": "04429-4340",
      "geo": {
        "lat": "5.9637",
        "lng": "170.5322"
      }
    },
    "phone": "(550) 978-1124",
    "website": "ugly-poultry.info",
    "company": {
      "name": "Fay, Ortiz and Reichert",
      "catchPhrase": "Face to face fault-tolerant application",
      "bs": "harness magnetic solutions"
    }
  },
  {
    "id": "548fbe75-81a0-45b5-a900-83e30596dd06",
    "name": "Clarabelle Kerluke",
    "username": "Talon_Howell27",
    "email": "Eric.Moore@gmail.com",
    "address": {
      "street": "Morissette Mission",
      "suite": 26328,
      "city": "Willfurt",
      "zipcode": "08075",
      "geo": {
        "lat": "-17.2172",
        "lng": "40.0770"
      }
    },
    "phone": "1-261-776-4908",
    "website": "dry-spice.name",
    "company": {
      "name": "Ondricka LLC",
      "catchPhrase": "Upgradable zero administration info-mediaries",
      "bs": "utilize value-added e-markets"
    }
  }
]
Selected values:
[
  {
    "id": "0e432f6f-7b9a-4170-935d-a3266ca65795",
    "name": "Estrella Gislason",
    "username": "Kyla_Kuhn",
    "email": "Kris73@yahoo.com",
    "address": {
      "street": "Brain Run",
      "suite": 45425,
      "city": "South Nedra",
      "zipcode": "16898-4760",
      "geo": {
        "lat": "-59.6555",
        "lng": "95.8670"
      }
    },
    "phone": "(899) 830-6771",
    "website": "well-lit-catalysis.name",
    "company": {
      "name": "Considine LLC",
      "catchPhrase": "Innovative bifurcated knowledge user",
      "bs": "unleash plug-and-play eyeballs"
    }
  }
]