v4.12.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": "f279b93c-a00a-40db-9529-f2b67f15c0ca",
    "name": "Dan Greenholt",
    "username": "Easton_Littel0",
    "email": "Lola.Crooks97@hotmail.com",
    "address": {
      "street": "Kuvalis Parkways",
      "suite": 59219,
      "city": "East Eddchester",
      "zipcode": "25042",
      "geo": {
        "lat": "-37.2512",
        "lng": "143.6481"
      }
    },
    "phone": "497.501.2958 x760",
    "website": "juicy-temp.biz",
    "company": {
      "name": "Wolf - Price",
      "catchPhrase": "Centralized national Graphic Interface",
      "bs": "productize revolutionary content"
    }
  },
  {
    "id": "d7f584a5-c758-4d2b-9637-c0129558b03e",
    "name": "Nils Klein",
    "username": "Neal.Hettinger",
    "email": "Dasia.Mosciski@yahoo.com",
    "address": {
      "street": "Louie Trail",
      "suite": 49917,
      "city": "Lake Delfina",
      "zipcode": "38131",
      "geo": {
        "lat": "-52.8653",
        "lng": "60.1579"
      }
    },
    "phone": "(460) 912-6107",
    "website": "dearest-secretariat.org",
    "company": {
      "name": "Dietrich Group",
      "catchPhrase": "Inverse analyzing benchmark",
      "bs": "facilitate e-business paradigms"
    }
  },
  {
    "id": "8116715f-6447-4503-9f16-ba40e2cda4fa",
    "name": "Vito Lueilwitz",
    "username": "Johathan_Swaniawski",
    "email": "Alessandro.Hackett6@yahoo.com",
    "address": {
      "street": "Damon Forge",
      "suite": 51071,
      "city": "Port Nathanielmouth",
      "zipcode": "77454",
      "geo": {
        "lat": "29.1035",
        "lng": "-158.0098"
      }
    },
    "phone": "285.326.9014 x0199",
    "website": "gripping-county.info",
    "company": {
      "name": "Hartmann - Heller",
      "catchPhrase": "Synergistic well-modulated collaboration",
      "bs": "implement web-enabled partnerships"
    }
  },
  {
    "id": "509e88f6-e8da-49a4-a8b1-52d1ede4453f",
    "name": "Sheila Jerde",
    "username": "Ambrose_Jacobson",
    "email": "Ryder.Gottlieb26@yahoo.com",
    "address": {
      "street": "Bernhard Unions",
      "suite": 10543,
      "city": "Sunrise Manor",
      "zipcode": "20548",
      "geo": {
        "lat": "62.4187",
        "lng": "-93.9574"
      }
    },
    "phone": "711-583-8443 x9518",
    "website": "impassioned-tough-guy.org",
    "company": {
      "name": "Heathcote, Dietrich and Waelchi",
      "catchPhrase": "Cross-group multi-state challenge",
      "bs": "transition granular channels"
    }
  },
  {
    "id": "f7b87f4a-8743-4b39-9599-c2b2b8bc1dfb",
    "name": "Libbie Krajcik",
    "username": "Bertrand11",
    "email": "Margarett82@gmail.com",
    "address": {
      "street": "Mraz Squares",
      "suite": 81070,
      "city": "Trompfort",
      "zipcode": "29923-6254",
      "geo": {
        "lat": "40.1193",
        "lng": "-83.3312"
      }
    },
    "phone": "578.901.8722 x4458",
    "website": "nifty-mechanism.info",
    "company": {
      "name": "McClure, Price and Baumbach",
      "catchPhrase": "Enhanced needs-based info-mediaries",
      "bs": "whiteboard virtual infrastructures"
    }
  },
  {
    "id": "cc9a651d-d211-478c-85ab-c3bac1c84d1f",
    "name": "Reva Murray",
    "username": "Manley_Schulist18",
    "email": "Faustino_Shields@hotmail.com",
    "address": {
      "street": "Emie Causeway",
      "suite": 10244,
      "city": "East Josefina",
      "zipcode": "30139",
      "geo": {
        "lat": "77.9881",
        "lng": "-122.5269"
      }
    },
    "phone": "966-279-5813 x38852",
    "website": "appropriate-pear.net",
    "company": {
      "name": "Schumm, Gottlieb and Ratke",
      "catchPhrase": "Decentralized logistical superstructure",
      "bs": "whiteboard one-to-one infrastructures"
    }
  },
  {
    "id": "95e2dcdc-3b76-4d25-aade-fe2569556611",
    "name": "Bart Hoeger",
    "username": "Keely_Mante",
    "email": "Cesar46@hotmail.com",
    "address": {
      "street": "Raoul Common",
      "suite": 40266,
      "city": "Lednerberg",
      "zipcode": "10882",
      "geo": {
        "lat": "-63.9088",
        "lng": "-162.7515"
      }
    },
    "phone": "(217) 358-7461",
    "website": "ripe-horror.info",
    "company": {
      "name": "Buckridge - Waelchi",
      "catchPhrase": "Organized asymmetric budgetary management",
      "bs": "strategize cutting-edge methodologies"
    }
  },
  {
    "id": "1ef765fa-0cb3-4b17-80b4-cd9c4b60a789",
    "name": "Velda Bogisich",
    "username": "Lou_Hermiston",
    "email": "Austen_Beer@gmail.com",
    "address": {
      "street": "Karianne Locks",
      "suite": 35538,
      "city": "Port Minniestad",
      "zipcode": "80958-7725",
      "geo": {
        "lat": "39.1074",
        "lng": "162.4659"
      }
    },
    "phone": "1-279-415-8165 x28750",
    "website": "gracious-grasshopper.com",
    "company": {
      "name": "Casper, Grady and Halvorson",
      "catchPhrase": "User-centric empowering knowledge base",
      "bs": "morph visionary synergies"
    }
  },
  {
    "id": "5dab882c-9656-4b17-896c-f92682bd7dd5",
    "name": "Elton Lockman",
    "username": "Virginia_Brakus69",
    "email": "Marty.Balistreri@hotmail.com",
    "address": {
      "street": "Glover Forge",
      "suite": 18489,
      "city": "O'Konview",
      "zipcode": "80156-0002",
      "geo": {
        "lat": "50.4281",
        "lng": "79.2449"
      }
    },
    "phone": "312.600.8464 x2542",
    "website": "authentic-corduroy.biz",
    "company": {
      "name": "Howell - Bernhard",
      "catchPhrase": "Persevering bottom-line Graphic Interface",
      "bs": "enable B2B architectures"
    }
  },
  {
    "id": "1a5d24ee-ec47-4803-bcf5-0ffa18faf648",
    "name": "Lysanne Trantow",
    "username": "Keon.OKon75",
    "email": "Ashton_Rodriguez25@gmail.com",
    "address": {
      "street": "Mohr Run",
      "suite": 16437,
      "city": "South Gate",
      "zipcode": "36604",
      "geo": {
        "lat": "-84.1563",
        "lng": "-179.1902"
      }
    },
    "phone": "352.326.0648 x05741",
    "website": "incredible-dream.org",
    "company": {
      "name": "Fritsch - Becker",
      "catchPhrase": "Devolved full-range budgetary management",
      "bs": "orchestrate end-to-end solutions"
    }
  },
  {
    "id": "09597b98-5309-4bcc-bf45-21b98ae674f8",
    "name": "Guy Farrell",
    "username": "Joanne.Gislason37",
    "email": "Alia_Rosenbaum@hotmail.com",
    "address": {
      "street": "Myah Courts",
      "suite": 24923,
      "city": "West Tyra",
      "zipcode": "24396",
      "geo": {
        "lat": "70.9680",
        "lng": "48.1882"
      }
    },
    "phone": "1-399-877-3992",
    "website": "discrete-nymph.biz",
    "company": {
      "name": "Collier - Leffler",
      "catchPhrase": "Robust full-range budgetary management",
      "bs": "recontextualize cross-media paradigms"
    }
  },
  {
    "id": "9107e4d1-dcd7-429b-a01f-a50d61090ecb",
    "name": "Ramiro Franey",
    "username": "Ima_Yost",
    "email": "Carson84@yahoo.com",
    "address": {
      "street": "Waelchi Mills",
      "suite": 24168,
      "city": "Bahringerberg",
      "zipcode": "63227-8393",
      "geo": {
        "lat": "-30.4233",
        "lng": "155.5593"
      }
    },
    "phone": "1-432-804-7332",
    "website": "grounded-shoelace.com",
    "company": {
      "name": "Barrows, Streich and King",
      "catchPhrase": "Networked value-added protocol",
      "bs": "synthesize B2B relationships"
    }
  },
  {
    "id": "ac6ecd9a-23c6-426a-9063-cc918e49fd6b",
    "name": "Rozella Nicolas",
    "username": "Therese32",
    "email": "Maurice0@yahoo.com",
    "address": {
      "street": "Manley Mount",
      "suite": 86992,
      "city": "Kendale Lakes",
      "zipcode": "83457-7680",
      "geo": {
        "lat": "-70.2398",
        "lng": "-79.1643"
      }
    },
    "phone": "776.686.6084 x309",
    "website": "cluttered-lending.org",
    "company": {
      "name": "Mayert, Bergnaum and Sawayn",
      "catchPhrase": "Organic real-time definition",
      "bs": "e-enable mission-critical e-business"
    }
  },
  {
    "id": "ef56eef0-ca0f-4e01-bfe7-cb33c26df0cc",
    "name": "Werner Boyle",
    "username": "Lane12",
    "email": "Ena.Wisozk@gmail.com",
    "address": {
      "street": "Adams Parkway",
      "suite": 58372,
      "city": "New Derick",
      "zipcode": "62112-7338",
      "geo": {
        "lat": "-58.9047",
        "lng": "-88.3940"
      }
    },
    "phone": "1-213-777-6740",
    "website": "discrete-piccolo.net",
    "company": {
      "name": "Goodwin Inc",
      "catchPhrase": "Grass-roots actuating toolset",
      "bs": "maximize 24/365 experiences"
    }
  },
  {
    "id": "86e521ee-404c-4d2a-baa5-f87a7a34eb8e",
    "name": "Annabel Bruen",
    "username": "Elisabeth.Turner60",
    "email": "Raegan.Kassulke@gmail.com",
    "address": {
      "street": "Glover Valley",
      "suite": 53749,
      "city": "New Maverick",
      "zipcode": "35623-7505",
      "geo": {
        "lat": "-60.3095",
        "lng": "-163.0092"
      }
    },
    "phone": "391-242-8854",
    "website": "yummy-roommate.org",
    "company": {
      "name": "Wilderman and Sons",
      "catchPhrase": "Synergistic empowering utilisation",
      "bs": "drive visionary technologies"
    }
  },
  {
    "id": "e58e4b83-e938-46fd-bcaa-ae6040c62e84",
    "name": "Solon Goldner",
    "username": "Justice_Konopelski",
    "email": "Otis.Ryan@gmail.com",
    "address": {
      "street": "Lockman Circles",
      "suite": 94291,
      "city": "Hiltonbury",
      "zipcode": "44683",
      "geo": {
        "lat": "75.0122",
        "lng": "172.3364"
      }
    },
    "phone": "228.479.2264 x230",
    "website": "stimulating-mochi.biz",
    "company": {
      "name": "Mosciski, Hoeger and Spencer",
      "catchPhrase": "Enhanced exuding Graphic Interface",
      "bs": "target collaborative content"
    }
  },
  {
    "id": "5b98c2f0-8654-4724-9ee6-8d7454477e20",
    "name": "Elna O'Hara",
    "username": "Valentine.Schinner",
    "email": "Luz13@yahoo.com",
    "address": {
      "street": "Marques Springs",
      "suite": 70795,
      "city": "New Estellaberg",
      "zipcode": "73729",
      "geo": {
        "lat": "28.0430",
        "lng": "2.8112"
      }
    },
    "phone": "976-329-7047 x487",
    "website": "smug-opportunist.net",
    "company": {
      "name": "Schaefer - Rosenbaum",
      "catchPhrase": "Seamless uniform secured line",
      "bs": "e-enable intuitive networks"
    }
  },
  {
    "id": "9111f35d-10b7-4ada-b4a5-440ac1c269ae",
    "name": "Andreanne Mueller",
    "username": "Josiane89",
    "email": "Eino_Lueilwitz91@yahoo.com",
    "address": {
      "street": "Frami Creek",
      "suite": 47684,
      "city": "Lake Velma",
      "zipcode": "26411-8669",
      "geo": {
        "lat": "-7.9693",
        "lng": "-92.0527"
      }
    },
    "phone": "821.489.6378 x415",
    "website": "impure-yurt.net",
    "company": {
      "name": "Collier - Vandervort",
      "catchPhrase": "Seamless scalable flexibility",
      "bs": "productize e-business applications"
    }
  },
  {
    "id": "1da7fbb1-21dd-476d-bae4-a02735a0ba5e",
    "name": "Evie Ferry",
    "username": "Mozelle.Wunsch74",
    "email": "Cyrus38@yahoo.com",
    "address": {
      "street": "Charlene Springs",
      "suite": 39746,
      "city": "East Joel",
      "zipcode": "94113",
      "geo": {
        "lat": "45.3620",
        "lng": "-99.3129"
      }
    },
    "phone": "787-955-7540 x777",
    "website": "suspicious-octave.name",
    "company": {
      "name": "Frami - Erdman",
      "catchPhrase": "Ameliorated dynamic knowledge user",
      "bs": "exploit leading-edge convergence"
    }
  },
  {
    "id": "feac225a-70da-4e16-b88b-fd302936c64f",
    "name": "Mervin Beatty",
    "username": "Barney.Dach",
    "email": "Carissa.Witting11@yahoo.com",
    "address": {
      "street": "VonRueden Turnpike",
      "suite": 53510,
      "city": "Krajcikburgh",
      "zipcode": "54341-1187",
      "geo": {
        "lat": "19.2817",
        "lng": "34.5960"
      }
    },
    "phone": "872.296.7124 x48977",
    "website": "defenseless-father.com",
    "company": {
      "name": "O'Conner - Stamm",
      "catchPhrase": "Streamlined methodical access",
      "bs": "transition real-time deliverables"
    }
  },
  {
    "id": "3c6043fa-875b-4f9c-83ca-34db56bacf77",
    "name": "Alden Doyle",
    "username": "Trudie87",
    "email": "Taya.Crist@gmail.com",
    "address": {
      "street": "Jordi Underpass",
      "suite": 50040,
      "city": "South Valley",
      "zipcode": "40235-1069",
      "geo": {
        "lat": "-5.0037",
        "lng": "-178.5645"
      }
    },
    "phone": "1-804-841-2976 x688",
    "website": "extroverted-millimeter.biz",
    "company": {
      "name": "Parisian, McDermott and Luettgen",
      "catchPhrase": "Multi-lateral system-worthy core",
      "bs": "disintermediate bricks-and-clicks ROI"
    }
  },
  {
    "id": "c7709c8a-932e-46ad-a0f6-c259935e5ca2",
    "name": "Sabrina McClure",
    "username": "Cruz.Boyle",
    "email": "Luella_Dicki@gmail.com",
    "address": {
      "street": "Zackery Terrace",
      "suite": 30641,
      "city": "West Milo",
      "zipcode": "05723-6100",
      "geo": {
        "lat": "65.5840",
        "lng": "-104.7907"
      }
    },
    "phone": "(242) 607-9398 x36816",
    "website": "incomparable-plowman.info",
    "company": {
      "name": "Veum Group",
      "catchPhrase": "Cross-group bottom-line success",
      "bs": "syndicate B2B deliverables"
    }
  },
  {
    "id": "2b16b22c-cf14-439f-8ebb-055b8ea8dfa8",
    "name": "Travon Olson",
    "username": "Rolando_Larson",
    "email": "Claudine_OConnell@hotmail.com",
    "address": {
      "street": "Becker Vista",
      "suite": 92009,
      "city": "Port Demond",
      "zipcode": "71854-2779",
      "geo": {
        "lat": "87.2650",
        "lng": "98.4467"
      }
    },
    "phone": "1-731-361-4902",
    "website": "left-pond.biz",
    "company": {
      "name": "Streich, Wunsch and Fritsch",
      "catchPhrase": "Reduced global time-frame",
      "bs": "redefine virtual deliverables"
    }
  },
  {
    "id": "35e9c262-4517-4c57-940e-582115e6a14d",
    "name": "Chesley O'Connell",
    "username": "Izaiah_Kessler79",
    "email": "Mason.Bogisich20@gmail.com",
    "address": {
      "street": "Jayson Mountains",
      "suite": 94275,
      "city": "Lake Kalefort",
      "zipcode": "25924-6322",
      "geo": {
        "lat": "33.8920",
        "lng": "64.4473"
      }
    },
    "phone": "(813) 470-9213",
    "website": "unfinished-trolley.name",
    "company": {
      "name": "Bosco, Rippin and Carroll",
      "catchPhrase": "Automated dedicated pricing structure",
      "bs": "synergize viral partnerships"
    }
  },
  {
    "id": "d0a3c35b-d028-4d1d-a860-7f412dbb07b0",
    "name": "Ansley Morissette",
    "username": "Gerda_Hilpert",
    "email": "Lee.Gutmann6@gmail.com",
    "address": {
      "street": "Reinger Wells",
      "suite": 68921,
      "city": "Paucekchester",
      "zipcode": "34029-2408",
      "geo": {
        "lat": "22.2888",
        "lng": "94.1566"
      }
    },
    "phone": "1-867-803-1628",
    "website": "chilly-angle.com",
    "company": {
      "name": "Bayer - VonRueden",
      "catchPhrase": "Polarised secondary data-warehouse",
      "bs": "integrate B2B methodologies"
    }
  },
  {
    "id": "75c744e4-7841-4600-a6f0-7ebf0f953059",
    "name": "Murphy Schimmel",
    "username": "Maudie.Brakus",
    "email": "Jimmy.Lueilwitz@hotmail.com",
    "address": {
      "street": "Ruecker Camp",
      "suite": 39495,
      "city": "Dorothyborough",
      "zipcode": "95220",
      "geo": {
        "lat": "-24.7694",
        "lng": "-169.9494"
      }
    },
    "phone": "364-376-4651",
    "website": "violet-black.biz",
    "company": {
      "name": "Zboncak - Hilpert",
      "catchPhrase": "Polarised multimedia orchestration",
      "bs": "monetize compelling interfaces"
    }
  },
  {
    "id": "8294bd79-73f0-470f-8ecb-230a9665d145",
    "name": "Raymond Grimes",
    "username": "Damon.Daniel11",
    "email": "Edwardo16@hotmail.com",
    "address": {
      "street": "Don Gardens",
      "suite": 54384,
      "city": "Raoulview",
      "zipcode": "37473-5742",
      "geo": {
        "lat": "86.9651",
        "lng": "175.4393"
      }
    },
    "phone": "971-842-0432 x389",
    "website": "zealous-bosom.biz",
    "company": {
      "name": "Turcotte - Pacocha",
      "catchPhrase": "Cross-group local support",
      "bs": "facilitate cross-media eyeballs"
    }
  },
  {
    "id": "39a916ee-2495-4fa4-99a0-04a6617b15ed",
    "name": "Dylan Becker",
    "username": "Jana.Zemlak41",
    "email": "Marcos_Kunde@yahoo.com",
    "address": {
      "street": "Ratke Lane",
      "suite": 41520,
      "city": "Wuckertborough",
      "zipcode": "08072",
      "geo": {
        "lat": "15.3564",
        "lng": "87.0341"
      }
    },
    "phone": "1-626-371-9347 x984",
    "website": "female-pocketbook.name",
    "company": {
      "name": "Hyatt, Volkman and Heidenreich",
      "catchPhrase": "Exclusive regional Graphical User Interface",
      "bs": "integrate open-source channels"
    }
  },
  {
    "id": "53a11299-78c7-4e85-abc5-1ac6285d2ac7",
    "name": "Hans Barton",
    "username": "Robb_Bins",
    "email": "Delmer.Wilkinson4@hotmail.com",
    "address": {
      "street": "Witting Mountains",
      "suite": 33046,
      "city": "McGlynnhaven",
      "zipcode": "03527-7630",
      "geo": {
        "lat": "-89.9223",
        "lng": "49.3725"
      }
    },
    "phone": "815.864.8035 x330",
    "website": "witty-dump.org",
    "company": {
      "name": "Cummings Group",
      "catchPhrase": "Progressive analyzing conglomeration",
      "bs": "repurpose innovative systems"
    }
  },
  {
    "id": "2d6f68b5-4b62-4b00-b1e2-554451351f4e",
    "name": "Adriana Zemlak",
    "username": "Nikki.Erdman",
    "email": "Lottie25@gmail.com",
    "address": {
      "street": "Wilbert Underpass",
      "suite": 78823,
      "city": "Cadechester",
      "zipcode": "12631-2850",
      "geo": {
        "lat": "-53.4173",
        "lng": "124.0086"
      }
    },
    "phone": "1-580-271-0555",
    "website": "ornate-karate.org",
    "company": {
      "name": "Pagac - Von",
      "catchPhrase": "Monitored even-keeled focus group",
      "bs": "target ubiquitous experiences"
    }
  }
]
Selected values:
[
  {
    "id": "509e88f6-e8da-49a4-a8b1-52d1ede4453f",
    "name": "Sheila Jerde",
    "username": "Ambrose_Jacobson",
    "email": "Ryder.Gottlieb26@yahoo.com",
    "address": {
      "street": "Bernhard Unions",
      "suite": 10543,
      "city": "Sunrise Manor",
      "zipcode": "20548",
      "geo": {
        "lat": "62.4187",
        "lng": "-93.9574"
      }
    },
    "phone": "711-583-8443 x9518",
    "website": "impassioned-tough-guy.org",
    "company": {
      "name": "Heathcote, Dietrich and Waelchi",
      "catchPhrase": "Cross-group multi-state challenge",
      "bs": "transition granular channels"
    }
  }
]