v3.8.1

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:

JSX<Select
  multi
  options={options}
  onChange={(values) => this.onChange(values)}
/>

Demo

Major Metz×

 

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": "ba287241-cb62-4ae5-af49-fc52a0f3f5ab",
    "name": "Samson Hickle",
    "username": "Dagmar.Hyatt99",
    "email": "Kane_Blick@gmail.com",
    "address": {
      "street": "Shana Island",
      "suite": 83420,
      "city": "North Tracey",
      "zipcode": "08631-8018",
      "geo": {
        "lat": "-84.9392",
        "lng": "-176.6661"
      }
    },
    "phone": "816-725-0312",
    "website": "rico.org",
    "company": {
      "name": "Walter LLC",
      "catchPhrase": "Vision-oriented zero defect productivity",
      "bs": "B2C implement e-tailers"
    }
  },
  {
    "id": "a2161876-e5f8-4086-903a-c59a3473fe6d",
    "name": "Clifton Wolff",
    "username": "Denis29",
    "email": "Herminio_Franecki74@gmail.com",
    "address": {
      "street": "Cruickshank Trail",
      "suite": 36927,
      "city": "North Rogerchester",
      "zipcode": "86934-1296",
      "geo": {
        "lat": "-39.9064",
        "lng": "-84.3568"
      }
    },
    "phone": "(645) 273-6966",
    "website": "bernardo.org",
    "company": {
      "name": "Daugherty - Abbott",
      "catchPhrase": "User-friendly attitude-oriented workforce",
      "bs": "value-added streamline content"
    }
  },
  {
    "id": "9344c4c7-f553-4779-b0ae-7be4bd0d85d2",
    "name": "Freda Dietrich",
    "username": "Lennie13",
    "email": "Karlie.Franecki33@gmail.com",
    "address": {
      "street": "Ricardo Mountains",
      "suite": 27456,
      "city": "West Neil",
      "zipcode": "42390-1415",
      "geo": {
        "lat": "64.9938",
        "lng": "1.4274"
      }
    },
    "phone": "1-745-075-0495",
    "website": "ervin.net",
    "company": {
      "name": "Adams, Baumbach and Miller",
      "catchPhrase": "Universal tangible methodology",
      "bs": "turn-key target web services"
    }
  },
  {
    "id": "b24a0577-9768-4eae-b4c8-ed676a2217dc",
    "name": "Major Metz",
    "username": "Rylee.Eichmann22",
    "email": "Michele92@gmail.com",
    "address": {
      "street": "Hills Union",
      "suite": 51880,
      "city": "Gerholdberg",
      "zipcode": "89390",
      "geo": {
        "lat": "59.8141",
        "lng": "82.0289"
      }
    },
    "phone": "875.559.3248",
    "website": "alexandrine.biz",
    "company": {
      "name": "Ratke, O'Conner and Thiel",
      "catchPhrase": "Digitized composite alliance",
      "bs": "bleeding-edge reinvent content"
    }
  },
  {
    "id": "b416569e-75af-4b9c-ae58-bf6ff5493aa9",
    "name": "Ressie Bogisich",
    "username": "Rossie3",
    "email": "Xander_Johnson96@gmail.com",
    "address": {
      "street": "Cortez Light",
      "suite": 52662,
      "city": "North Andersonport",
      "zipcode": "36126-9912",
      "geo": {
        "lat": "-8.0404",
        "lng": "-0.2171"
      }
    },
    "phone": "857-343-0255 x9021",
    "website": "adrian.net",
    "company": {
      "name": "Marvin, Torp and Torp",
      "catchPhrase": "Managed bottom-line policy",
      "bs": "granular visualize deliverables"
    }
  },
  {
    "id": "967333d5-a00c-4ab6-85bd-123ae1f6b240",
    "name": "Bernardo Ratke",
    "username": "Fabiola.Rutherford",
    "email": "Shea.Renner@yahoo.com",
    "address": {
      "street": "Tracey Junction",
      "suite": 52491,
      "city": "Boyermouth",
      "zipcode": "72392-2388",
      "geo": {
        "lat": "31.8948",
        "lng": "-98.2409"
      }
    },
    "phone": "(929) 561-7043",
    "website": "arely.info",
    "company": {
      "name": "Hettinger - Cremin",
      "catchPhrase": "Business-focused interactive moratorium",
      "bs": "web-enabled incubate e-services"
    }
  },
  {
    "id": "aede49e0-556a-4b78-8f21-d85be57a607c",
    "name": "Alan McGlynn",
    "username": "Vernon_Rippin86",
    "email": "Freddie_Rolfson53@gmail.com",
    "address": {
      "street": "Eichmann Center",
      "suite": 5926,
      "city": "Gaylordhaven",
      "zipcode": "67762-3924",
      "geo": {
        "lat": "18.2512",
        "lng": "55.8900"
      }
    },
    "phone": "(442) 417-8113 x9031",
    "website": "magdalena.info",
    "company": {
      "name": "Grimes - Dickens",
      "catchPhrase": "Assimilated tertiary structure",
      "bs": "impactful iterate users"
    }
  },
  {
    "id": "0f8365ce-99dd-46f7-a14a-89ecc63701de",
    "name": "Geovany McCullough",
    "username": "Myles.Kris",
    "email": "Bradford_Carroll@hotmail.com",
    "address": {
      "street": "Theron Forge",
      "suite": 80876,
      "city": "Breitenberghaven",
      "zipcode": "27150",
      "geo": {
        "lat": "10.5176",
        "lng": "135.2022"
      }
    },
    "phone": "766-856-6841 x8058",
    "website": "luella.info",
    "company": {
      "name": "Lebsack Inc",
      "catchPhrase": "Adaptive didactic conglomeration",
      "bs": "best-of-breed seize infrastructures"
    }
  },
  {
    "id": "768d79c6-1076-4ea1-8e6a-32c1696f50bf",
    "name": "Afton Homenick",
    "username": "Kole_Koepp64",
    "email": "Jarvis4@yahoo.com",
    "address": {
      "street": "Eulah Bridge",
      "suite": 25571,
      "city": "Lauratown",
      "zipcode": "18624-0200",
      "geo": {
        "lat": "-6.4073",
        "lng": "-1.4075"
      }
    },
    "phone": "1-379-821-8547",
    "website": "chelsea.org",
    "company": {
      "name": "Lynch Inc",
      "catchPhrase": "Versatile transitional monitoring",
      "bs": "frictionless redefine solutions"
    }
  },
  {
    "id": "3dec1e38-9d2b-4e63-8b2c-3302d1d0f827",
    "name": "Orpha McCullough",
    "username": "Kolby30",
    "email": "Robyn.Littel@gmail.com",
    "address": {
      "street": "Hilpert Tunnel",
      "suite": 22402,
      "city": "Kovacekbury",
      "zipcode": "65801",
      "geo": {
        "lat": "47.3580",
        "lng": "-85.3038"
      }
    },
    "phone": "(570) 825-7239",
    "website": "kiana.info",
    "company": {
      "name": "Prosacco LLC",
      "catchPhrase": "Integrated real-time structure",
      "bs": "vertical strategize architectures"
    }
  },
  {
    "id": "272b728a-c219-436e-82e3-b15796c47fac",
    "name": "Deonte Smith",
    "username": "Rosetta.Gorczany18",
    "email": "Delta66@yahoo.com",
    "address": {
      "street": "Jose Neck",
      "suite": 52695,
      "city": "West Kaden",
      "zipcode": "72480-1397",
      "geo": {
        "lat": "-50.2737",
        "lng": "120.7059"
      }
    },
    "phone": "815.573.6615",
    "website": "imogene.com",
    "company": {
      "name": "Dibbert Inc",
      "catchPhrase": "Persevering responsive throughput",
      "bs": "granular strategize metrics"
    }
  },
  {
    "id": "6aa692d4-c7d4-4fd1-bdc0-d87a6264ab57",
    "name": "Terrell Greenholt",
    "username": "Chloe.Shields4",
    "email": "Johnson17@hotmail.com",
    "address": {
      "street": "Teresa Rapid",
      "suite": 74767,
      "city": "Noeside",
      "zipcode": "17755",
      "geo": {
        "lat": "-22.2270",
        "lng": "-94.8594"
      }
    },
    "phone": "044-331-5993",
    "website": "zena.com",
    "company": {
      "name": "Padberg LLC",
      "catchPhrase": "Team-oriented executive website",
      "bs": "rich generate web services"
    }
  },
  {
    "id": "929f58d9-46fe-4064-9d7b-25fa5f2f01f4",
    "name": "Darrin Homenick",
    "username": "Darby.Deckow54",
    "email": "Cindy0@hotmail.com",
    "address": {
      "street": "Dietrich Ranch",
      "suite": 12185,
      "city": "Lake Aronbury",
      "zipcode": "47425-2862",
      "geo": {
        "lat": "86.9106",
        "lng": "107.9404"
      }
    },
    "phone": "600-735-0317 x1857",
    "website": "winnifred.info",
    "company": {
      "name": "O'Keefe, Barrows and O'Conner",
      "catchPhrase": "Digitized reciprocal approach",
      "bs": "one-to-one synthesize relationships"
    }
  },
  {
    "id": "f8744611-c611-4b43-b5d7-a6f45b8a002a",
    "name": "Eileen Orn",
    "username": "Sister23",
    "email": "Leila62@yahoo.com",
    "address": {
      "street": "Trevor Harbor",
      "suite": 49606,
      "city": "New Tristian",
      "zipcode": "40781",
      "geo": {
        "lat": "11.7549",
        "lng": "65.4275"
      }
    },
    "phone": "505-375-2620 x7822",
    "website": "kianna.net",
    "company": {
      "name": "Bechtelar - Braun",
      "catchPhrase": "Secured responsive focus group",
      "bs": "cutting-edge revolutionize e-markets"
    }
  },
  {
    "id": "2de18755-ef94-4148-a6b6-bc50af38513b",
    "name": "Oma Gleason",
    "username": "Allan58",
    "email": "Robin.Cremin@yahoo.com",
    "address": {
      "street": "Nina Ports",
      "suite": 94785,
      "city": "Connfurt",
      "zipcode": "51023-9924",
      "geo": {
        "lat": "45.6065",
        "lng": "153.1597"
      }
    },
    "phone": "698.268.3841 x9899",
    "website": "kenton.org",
    "company": {
      "name": "Altenwerth Group",
      "catchPhrase": "Extended upward-trending emulation",
      "bs": "seamless synthesize methodologies"
    }
  },
  {
    "id": "6ec00898-6868-4243-b494-8690886b696f",
    "name": "Rossie Oberbrunner",
    "username": "Bernie.Skiles",
    "email": "Jacynthe.Klein@yahoo.com",
    "address": {
      "street": "Hintz Turnpike",
      "suite": 57260,
      "city": "Port Hosea",
      "zipcode": "35877",
      "geo": {
        "lat": "-15.7814",
        "lng": "165.8026"
      }
    },
    "phone": "1-523-607-9359 x2642",
    "website": "beulah.info",
    "company": {
      "name": "Dicki - Wilkinson",
      "catchPhrase": "Function-based intermediate productivity",
      "bs": "cutting-edge e-enable convergence"
    }
  },
  {
    "id": "3fa9a39c-e378-46f8-a5c7-6d2f874d69c6",
    "name": "Mathias Langworth",
    "username": "Abbie_Dibbert",
    "email": "Felton83@gmail.com",
    "address": {
      "street": "Vilma Island",
      "suite": 94336,
      "city": "Lake Malcolmville",
      "zipcode": "42349",
      "geo": {
        "lat": "-59.9671",
        "lng": "-72.5924"
      }
    },
    "phone": "(992) 475-6379 x650",
    "website": "lelia.com",
    "company": {
      "name": "Hamill LLC",
      "catchPhrase": "Extended upward-trending standardization",
      "bs": "value-added mesh markets"
    }
  },
  {
    "id": "5c7a8ecd-13c0-4737-b57c-5e4859acff30",
    "name": "Shayna Friesen",
    "username": "Waylon36",
    "email": "Kitty_Aufderhar76@hotmail.com",
    "address": {
      "street": "Wisoky Ferry",
      "suite": 86456,
      "city": "Lake Efren",
      "zipcode": "16351-5912",
      "geo": {
        "lat": "8.4979",
        "lng": "-129.7708"
      }
    },
    "phone": "(004) 979-6764 x0785",
    "website": "ivy.net",
    "company": {
      "name": "Koch Inc",
      "catchPhrase": "Organic context-sensitive focus group",
      "bs": "robust grow platforms"
    }
  },
  {
    "id": "e38bab5c-3590-4e53-adb6-14d30ebe4051",
    "name": "John Bernhard",
    "username": "Brennan.Frami59",
    "email": "Irving_Cole@gmail.com",
    "address": {
      "street": "Ashlee Gateway",
      "suite": 45483,
      "city": "Lake Novahaven",
      "zipcode": "37326",
      "geo": {
        "lat": "-67.8789",
        "lng": "56.7904"
      }
    },
    "phone": "1-549-255-7716 x96585",
    "website": "hershel.net",
    "company": {
      "name": "Langworth, Mueller and Upton",
      "catchPhrase": "Balanced disintermediate customer loyalty",
      "bs": "user-centric deliver paradigms"
    }
  },
  {
    "id": "fa175123-c1cd-4166-9d9e-15ca33715fcf",
    "name": "Elda Friesen",
    "username": "Grayson14",
    "email": "Eliza39@yahoo.com",
    "address": {
      "street": "Malachi Ridge",
      "suite": 28356,
      "city": "Maudeburgh",
      "zipcode": "23901",
      "geo": {
        "lat": "-47.4489",
        "lng": "-175.2903"
      }
    },
    "phone": "1-911-616-8409",
    "website": "juanita.com",
    "company": {
      "name": "Reynolds Group",
      "catchPhrase": "Monitored static firmware",
      "bs": "e-business harness systems"
    }
  },
  {
    "id": "a2e489d8-ace8-48c8-afdf-9ebbe58250b3",
    "name": "Jose Kovacek",
    "username": "Clemens.Vandervort83",
    "email": "Jermey_Grimes@yahoo.com",
    "address": {
      "street": "Nicholas Rest",
      "suite": 21825,
      "city": "Littleburgh",
      "zipcode": "86220",
      "geo": {
        "lat": "76.4448",
        "lng": "-1.0987"
      }
    },
    "phone": "940-875-3774 x126",
    "website": "adelbert.name",
    "company": {
      "name": "Beier Group",
      "catchPhrase": "Optimized interactive focus group",
      "bs": "proactive scale mindshare"
    }
  },
  {
    "id": "82f31b5e-f8a3-4e6a-b314-e7fc989a1d1e",
    "name": "Mark Kihn",
    "username": "Laisha34",
    "email": "Margie_Luettgen73@yahoo.com",
    "address": {
      "street": "Hayes Skyway",
      "suite": 26511,
      "city": "Jasperstad",
      "zipcode": "83967-3465",
      "geo": {
        "lat": "-66.9105",
        "lng": "82.8320"
      }
    },
    "phone": "907.585.7960 x232",
    "website": "maia.com",
    "company": {
      "name": "Grady, Schowalter and Bogan",
      "catchPhrase": "Up-sized 3rd generation benchmark",
      "bs": "collaborative reintermediate e-business"
    }
  },
  {
    "id": "62a63806-d812-4ae9-a464-f76c5a4559c9",
    "name": "Fredy Langosh",
    "username": "Floyd_Lehner",
    "email": "Gaylord.Hudson@yahoo.com",
    "address": {
      "street": "Kemmer Station",
      "suite": 33332,
      "city": "North Violachester",
      "zipcode": "01554-4625",
      "geo": {
        "lat": "-87.1855",
        "lng": "12.0033"
      }
    },
    "phone": "(273) 351-9968",
    "website": "quinton.org",
    "company": {
      "name": "McGlynn - Fay",
      "catchPhrase": "Centralized optimal moratorium",
      "bs": "B2C empower infomediaries"
    }
  },
  {
    "id": "2eb94a48-25b6-4f3c-9f2c-c6e0b2d7c668",
    "name": "Greg Littel",
    "username": "Everett.Koch",
    "email": "Mabelle33@gmail.com",
    "address": {
      "street": "Alayna Vista",
      "suite": 31312,
      "city": "West Janet",
      "zipcode": "21962",
      "geo": {
        "lat": "-67.5302",
        "lng": "46.4776"
      }
    },
    "phone": "1-863-186-5516",
    "website": "javonte.org",
    "company": {
      "name": "Huels, Windler and Legros",
      "catchPhrase": "Diverse encompassing service-desk",
      "bs": "innovative enable applications"
    }
  },
  {
    "id": "b6357a6f-12ed-4f94-98b2-d8f3e8dcf2a7",
    "name": "Myriam Carter",
    "username": "Retha68",
    "email": "Maymie77@hotmail.com",
    "address": {
      "street": "Emmerich Bridge",
      "suite": 44058,
      "city": "New Tillman",
      "zipcode": "61076",
      "geo": {
        "lat": "-74.7673",
        "lng": "-4.9416"
      }
    },
    "phone": "(984) 364-9868 x4938",
    "website": "rey.com",
    "company": {
      "name": "Homenick, Fadel and Johns",
      "catchPhrase": "Switchable discrete monitoring",
      "bs": "transparent integrate users"
    }
  },
  {
    "id": "0341fab9-754e-4a93-80da-2cb2b8987c7a",
    "name": "Mose DuBuque",
    "username": "Maeve_Cassin",
    "email": "Ceasar_Hickle19@gmail.com",
    "address": {
      "street": "Kirlin Flats",
      "suite": 84074,
      "city": "North Elvera",
      "zipcode": "64035-5241",
      "geo": {
        "lat": "85.8453",
        "lng": "-36.6628"
      }
    },
    "phone": "(817) 625-2294 x5318",
    "website": "caleb.biz",
    "company": {
      "name": "Nader - Stiedemann",
      "catchPhrase": "Right-sized intangible policy",
      "bs": "impactful innovate e-markets"
    }
  },
  {
    "id": "19542627-de4e-4ad0-95b9-21a6138e9e4d",
    "name": "Clay Marvin",
    "username": "Jess_Leffler",
    "email": "Dion26@gmail.com",
    "address": {
      "street": "Juston Glens",
      "suite": 85589,
      "city": "Maeganside",
      "zipcode": "60777",
      "geo": {
        "lat": "-56.8172",
        "lng": "-150.8174"
      }
    },
    "phone": "492-091-0829",
    "website": "milo.com",
    "company": {
      "name": "Hackett - Raynor",
      "catchPhrase": "Future-proofed optimal customer loyalty",
      "bs": "efficient implement convergence"
    }
  },
  {
    "id": "859bd3ff-5c13-4c90-a836-8f6dfabe371f",
    "name": "Sylvia King",
    "username": "Edwina_Goodwin",
    "email": "Jett_Satterfield@gmail.com",
    "address": {
      "street": "Hammes Stravenue",
      "suite": 24868,
      "city": "Port Marilyne",
      "zipcode": "71213",
      "geo": {
        "lat": "10.6970",
        "lng": "-33.6833"
      }
    },
    "phone": "033-574-4024",
    "website": "claire.biz",
    "company": {
      "name": "Upton, Wunsch and Kuvalis",
      "catchPhrase": "Polarised optimal encryption",
      "bs": "enterprise engineer vortals"
    }
  },
  {
    "id": "d5d8db04-fab1-4551-ba70-d181601bcdcc",
    "name": "Roslyn Fisher",
    "username": "Marquis96",
    "email": "Lazaro94@gmail.com",
    "address": {
      "street": "Langosh Mission",
      "suite": 82739,
      "city": "North Aleen",
      "zipcode": "03634",
      "geo": {
        "lat": "-29.5046",
        "lng": "-16.9885"
      }
    },
    "phone": "249-992-5539",
    "website": "leanna.biz",
    "company": {
      "name": "Friesen - VonRueden",
      "catchPhrase": "Sharable secondary database",
      "bs": "innovative brand content"
    }
  },
  {
    "id": "640ee999-ee4c-45a2-b9d8-9f6c2e1c5d10",
    "name": "Estell Marvin",
    "username": "Jackeline_Waelchi",
    "email": "Jaydon.Hodkiewicz@yahoo.com",
    "address": {
      "street": "Nannie Extension",
      "suite": 8998,
      "city": "Emardborough",
      "zipcode": "38705",
      "geo": {
        "lat": "3.3313",
        "lng": "131.1779"
      }
    },
    "phone": "(307) 664-8954 x87560",
    "website": "justice.info",
    "company": {
      "name": "Lesch - Gorczany",
      "catchPhrase": "Down-sized contextually-based secured line",
      "bs": "turn-key seize e-tailers"
    }
  }
]
Selected values:
[
  {
    "id": "b24a0577-9768-4eae-b4c8-ed676a2217dc",
    "name": "Major Metz",
    "username": "Rylee.Eichmann22",
    "email": "Michele92@gmail.com",
    "address": {
      "street": "Hills Union",
      "suite": 51880,
      "city": "Gerholdberg",
      "zipcode": "89390",
      "geo": {
        "lat": "59.8141",
        "lng": "82.0289"
      }
    },
    "phone": "875.559.3248",
    "website": "alexandrine.biz",
    "company": {
      "name": "Ratke, O'Conner and Thiel",
      "catchPhrase": "Digitized composite alliance",
      "bs": "bleeding-edge reinvent content"
    }
  }
]