v3.6.7

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

Columbus Marks×

 

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": "08586dec-7810-41f0-ba78-c01311246c9c",
    "name": "Shyann Funk",
    "username": "Evan.Huels",
    "email": "Jamarcus_Gutkowski@gmail.com",
    "address": {
      "street": "Ernser Village",
      "suite": 1999,
      "city": "Gulgowskiside",
      "zipcode": "32047",
      "geo": {
        "lat": "18.6908",
        "lng": "-114.5640"
      }
    },
    "phone": "(528) 486-9754 x18305",
    "website": "elissa.org",
    "company": {
      "name": "Bruen, Hartmann and Fahey",
      "catchPhrase": "Optimized zero administration service-desk",
      "bs": "plug-and-play utilize web services"
    }
  },
  {
    "id": "758825b1-ed1e-45d8-b29d-124de759a0f9",
    "name": "Herta Hagenes",
    "username": "Karen45",
    "email": "Macie_Doyle@yahoo.com",
    "address": {
      "street": "Maye Canyon",
      "suite": 16963,
      "city": "New Lancestad",
      "zipcode": "04946-4682",
      "geo": {
        "lat": "-30.6800",
        "lng": "41.4068"
      }
    },
    "phone": "1-738-494-9781",
    "website": "adrain.name",
    "company": {
      "name": "Deckow, Klocko and Krajcik",
      "catchPhrase": "Cloned radical data-warehouse",
      "bs": "impactful synthesize channels"
    }
  },
  {
    "id": "c3e96e77-33ce-406f-98e9-10467721646e",
    "name": "Hattie Huels",
    "username": "Alfredo_Keeling97",
    "email": "Urban_Wolf@gmail.com",
    "address": {
      "street": "Hayes Knolls",
      "suite": 90174,
      "city": "New Brucechester",
      "zipcode": "39282-0886",
      "geo": {
        "lat": "-37.9033",
        "lng": "-103.9300"
      }
    },
    "phone": "1-471-325-7930 x875",
    "website": "francis.com",
    "company": {
      "name": "Romaguera - Boyer",
      "catchPhrase": "Reactive intangible encryption",
      "bs": "efficient engineer e-commerce"
    }
  },
  {
    "id": "7d9683d5-b21f-460e-aa42-ddc1743d5cb5",
    "name": "Columbus Marks",
    "username": "Jovany50",
    "email": "Bert36@gmail.com",
    "address": {
      "street": "Donna Highway",
      "suite": 22167,
      "city": "Marianneton",
      "zipcode": "51640-8960",
      "geo": {
        "lat": "-18.8721",
        "lng": "59.8262"
      }
    },
    "phone": "774-161-1971 x216",
    "website": "chaya.info",
    "company": {
      "name": "Cole - O'Hara",
      "catchPhrase": "Self-enabling discrete productivity",
      "bs": "real-time embrace portals"
    }
  },
  {
    "id": "0f3f13a9-5cf9-4abc-8a28-b3d89de4e517",
    "name": "Emilie Heller",
    "username": "Vivianne_Huels39",
    "email": "Maria.Borer@gmail.com",
    "address": {
      "street": "Chaz Creek",
      "suite": 45677,
      "city": "East Susie",
      "zipcode": "41002-0306",
      "geo": {
        "lat": "-76.4471",
        "lng": "-174.2484"
      }
    },
    "phone": "817-925-8870",
    "website": "eusebio.com",
    "company": {
      "name": "Rowe - Gusikowski",
      "catchPhrase": "Distributed needs-based capacity",
      "bs": "granular expedite systems"
    }
  },
  {
    "id": "3947bb5f-0fae-407b-8302-2314a07212fb",
    "name": "Asia Hermiston",
    "username": "Kale.Haag29",
    "email": "Jake93@hotmail.com",
    "address": {
      "street": "Tressa Streets",
      "suite": 77497,
      "city": "Port Emmettfurt",
      "zipcode": "50453-6464",
      "geo": {
        "lat": "17.5224",
        "lng": "-161.1149"
      }
    },
    "phone": "151.782.7816 x14758",
    "website": "johnpaul.info",
    "company": {
      "name": "Hessel - Bechtelar",
      "catchPhrase": "Organic static support",
      "bs": "revolutionary architect portals"
    }
  },
  {
    "id": "7c3236f6-29fd-44df-922a-92a39fbfea6b",
    "name": "Anthony Cummerata",
    "username": "Mossie.Bins98",
    "email": "Marge29@hotmail.com",
    "address": {
      "street": "Lubowitz Prairie",
      "suite": 88802,
      "city": "Zakaryport",
      "zipcode": "15401-2160",
      "geo": {
        "lat": "-24.9345",
        "lng": "115.2780"
      }
    },
    "phone": "916-268-0678 x78261",
    "website": "cyril.info",
    "company": {
      "name": "Schroeder - Baumbach",
      "catchPhrase": "Digitized fresh-thinking forecast",
      "bs": "best-of-breed synthesize action-items"
    }
  },
  {
    "id": "46a3dbde-2160-439f-bef5-5c41746aa532",
    "name": "Declan Roberts",
    "username": "Waino.Howell44",
    "email": "Trevion33@hotmail.com",
    "address": {
      "street": "Reinger Hills",
      "suite": 82500,
      "city": "Orachester",
      "zipcode": "29871-3216",
      "geo": {
        "lat": "-7.4746",
        "lng": "32.6531"
      }
    },
    "phone": "(353) 637-0663 x101",
    "website": "kira.net",
    "company": {
      "name": "Predovic and Sons",
      "catchPhrase": "Up-sized coherent matrices",
      "bs": "mission-critical deliver channels"
    }
  },
  {
    "id": "a652c018-1c13-4614-8519-11880a19d68d",
    "name": "Maureen Okuneva",
    "username": "Cristal.Schimmel48",
    "email": "Tara64@gmail.com",
    "address": {
      "street": "Corene Parkways",
      "suite": 71025,
      "city": "Cheyannestad",
      "zipcode": "89656-2072",
      "geo": {
        "lat": "27.0608",
        "lng": "-20.6083"
      }
    },
    "phone": "972.304.2001",
    "website": "eda.biz",
    "company": {
      "name": "Connelly - Hermiston",
      "catchPhrase": "Proactive next generation secured line",
      "bs": "web-enabled integrate eyeballs"
    }
  },
  {
    "id": "0e82cb8b-c569-458d-a5e8-71f3586e3ac3",
    "name": "Verna Wolff",
    "username": "Boris86",
    "email": "Ivory.Pfeffer@yahoo.com",
    "address": {
      "street": "Weissnat Shoals",
      "suite": 87704,
      "city": "Lefflerview",
      "zipcode": "80848",
      "geo": {
        "lat": "-4.9569",
        "lng": "-3.8775"
      }
    },
    "phone": "937.857.6713 x9065",
    "website": "destiney.info",
    "company": {
      "name": "Stanton - O'Connell",
      "catchPhrase": "Realigned local functionalities",
      "bs": "cross-platform generate channels"
    }
  },
  {
    "id": "e66cb79f-25ab-43d5-97ba-91ea9593962e",
    "name": "Cleora Anderson",
    "username": "Devyn.Crona",
    "email": "Otha.Greenholt@gmail.com",
    "address": {
      "street": "Anika Drives",
      "suite": 95761,
      "city": "Keeblerport",
      "zipcode": "79643",
      "geo": {
        "lat": "-83.2724",
        "lng": "0.2922"
      }
    },
    "phone": "501.209.6764 x47496",
    "website": "tristian.org",
    "company": {
      "name": "Kreiger Inc",
      "catchPhrase": "Profit-focused scalable migration",
      "bs": "innovative enhance users"
    }
  },
  {
    "id": "9ef3f36d-0048-4e80-90ae-df0e3d2b8f57",
    "name": "Marcia Kozey",
    "username": "Alfonzo14",
    "email": "Joaquin58@hotmail.com",
    "address": {
      "street": "Collier Lane",
      "suite": 90802,
      "city": "Juliannestad",
      "zipcode": "67853",
      "geo": {
        "lat": "-36.3992",
        "lng": "5.0896"
      }
    },
    "phone": "182.916.3452",
    "website": "else.org",
    "company": {
      "name": "Hahn - Wilderman",
      "catchPhrase": "Progressive cohesive website",
      "bs": "next-generation monetize vortals"
    }
  },
  {
    "id": "dc7c60e7-1c1b-4d49-b050-876baf5be07d",
    "name": "Darrel Schmitt",
    "username": "Kattie_Boyer",
    "email": "Raymundo49@gmail.com",
    "address": {
      "street": "Frami Court",
      "suite": 88453,
      "city": "East Maverick",
      "zipcode": "08193-0594",
      "geo": {
        "lat": "-13.6556",
        "lng": "24.1788"
      }
    },
    "phone": "1-790-953-6179 x1302",
    "website": "ashlee.name",
    "company": {
      "name": "Carter Group",
      "catchPhrase": "Face to face radical pricing structure",
      "bs": "visionary strategize web-readiness"
    }
  },
  {
    "id": "e53e5365-f3f7-48df-ba14-c93c2ea59605",
    "name": "Samir Hamill",
    "username": "Tobin21",
    "email": "Sherman10@gmail.com",
    "address": {
      "street": "Corwin Square",
      "suite": 91819,
      "city": "Kshlerinborough",
      "zipcode": "70444-4967",
      "geo": {
        "lat": "38.9448",
        "lng": "106.5041"
      }
    },
    "phone": "1-487-147-5106 x8418",
    "website": "trever.name",
    "company": {
      "name": "Emard - Zboncak",
      "catchPhrase": "Diverse systematic intranet",
      "bs": "turn-key deploy solutions"
    }
  },
  {
    "id": "4b08828c-d001-4d5f-b0dc-0ba6ecb0f56b",
    "name": "Kyla Sporer",
    "username": "Dario.Huel",
    "email": "Eli_Wolf95@yahoo.com",
    "address": {
      "street": "Kari Expressway",
      "suite": 265,
      "city": "New Mose",
      "zipcode": "07270-0006",
      "geo": {
        "lat": "43.5512",
        "lng": "0.4354"
      }
    },
    "phone": "1-725-423-7689 x2786",
    "website": "estrella.com",
    "company": {
      "name": "Thiel Inc",
      "catchPhrase": "Progressive national complexity",
      "bs": "leading-edge incentivize paradigms"
    }
  },
  {
    "id": "c2ebf983-a570-4388-9376-d1ce465f194d",
    "name": "Ellen McClure",
    "username": "Caroline.Schowalter85",
    "email": "Luella_Weissnat7@gmail.com",
    "address": {
      "street": "Kailee Divide",
      "suite": 22548,
      "city": "Bodeberg",
      "zipcode": "46940-4126",
      "geo": {
        "lat": "-60.3575",
        "lng": "-22.2799"
      }
    },
    "phone": "860.824.0486 x3654",
    "website": "amani.biz",
    "company": {
      "name": "Weissnat - Effertz",
      "catchPhrase": "Synergistic optimal standardization",
      "bs": "enterprise optimize web-readiness"
    }
  },
  {
    "id": "256d3a5a-5e35-4b70-a9b1-6e339f574537",
    "name": "Rozella Terry",
    "username": "Nona_Mante",
    "email": "Earlene34@hotmail.com",
    "address": {
      "street": "Alexandro Spurs",
      "suite": 97713,
      "city": "Krisbury",
      "zipcode": "83809-9977",
      "geo": {
        "lat": "-32.5461",
        "lng": "110.6107"
      }
    },
    "phone": "(231) 936-5824 x3336",
    "website": "christian.org",
    "company": {
      "name": "Rempel - Kertzmann",
      "catchPhrase": "Networked high-level implementation",
      "bs": "scalable unleash applications"
    }
  },
  {
    "id": "ccb9caf3-2162-406b-a2b2-da1408c12cf2",
    "name": "Jarret Stokes",
    "username": "Letha65",
    "email": "Vida47@gmail.com",
    "address": {
      "street": "Lonnie Fields",
      "suite": 78047,
      "city": "Rohanfurt",
      "zipcode": "30027-2658",
      "geo": {
        "lat": "-89.1553",
        "lng": "-174.1364"
      }
    },
    "phone": "877-080-7796 x528",
    "website": "winnifred.info",
    "company": {
      "name": "Flatley, Hirthe and Labadie",
      "catchPhrase": "Assimilated cohesive access",
      "bs": "turn-key expedite networks"
    }
  },
  {
    "id": "c57a9220-2d62-408c-a4e4-47b5c0536776",
    "name": "Mathias Hayes",
    "username": "Hortense_Volkman4",
    "email": "Keyshawn6@hotmail.com",
    "address": {
      "street": "Hyatt Route",
      "suite": 59840,
      "city": "Port Phoebe",
      "zipcode": "68127-4671",
      "geo": {
        "lat": "-63.2312",
        "lng": "92.0070"
      }
    },
    "phone": "1-527-553-6079 x5538",
    "website": "ross.biz",
    "company": {
      "name": "McDermott Inc",
      "catchPhrase": "Intuitive system-worthy encoding",
      "bs": "global enhance e-business"
    }
  },
  {
    "id": "5460df96-9994-4110-920a-de8b56d3cdc9",
    "name": "Brenda Corkery",
    "username": "Israel_DAmore40",
    "email": "Jermain_Douglas93@hotmail.com",
    "address": {
      "street": "Dario River",
      "suite": 16219,
      "city": "Beattytown",
      "zipcode": "05481-0805",
      "geo": {
        "lat": "44.7038",
        "lng": "-58.6945"
      }
    },
    "phone": "(553) 329-0278",
    "website": "tristian.net",
    "company": {
      "name": "Ebert - Sipes",
      "catchPhrase": "Stand-alone global portal",
      "bs": "user-centric leverage infrastructures"
    }
  },
  {
    "id": "90a56bf6-5222-417d-aa9b-9ccf080e9377",
    "name": "Yadira DuBuque",
    "username": "Fern_Cummerata7",
    "email": "Edwin72@hotmail.com",
    "address": {
      "street": "Isabella Heights",
      "suite": 78616,
      "city": "East Myriam",
      "zipcode": "10200",
      "geo": {
        "lat": "-6.5041",
        "lng": "1.2045"
      }
    },
    "phone": "087-019-9621",
    "website": "moriah.info",
    "company": {
      "name": "Bechtelar - Keeling",
      "catchPhrase": "Automated system-worthy architecture",
      "bs": "viral revolutionize functionalities"
    }
  },
  {
    "id": "dc7c8000-ea19-427e-b4f5-2f8b66e0c164",
    "name": "Stevie Tremblay",
    "username": "Kailey.Zulauf",
    "email": "Jovanny19@yahoo.com",
    "address": {
      "street": "Breitenberg River",
      "suite": 57050,
      "city": "Lake Richmond",
      "zipcode": "97447-3119",
      "geo": {
        "lat": "-5.7671",
        "lng": "39.7182"
      }
    },
    "phone": "614.719.8786 x6322",
    "website": "tamara.org",
    "company": {
      "name": "Yost and Sons",
      "catchPhrase": "Automated object-oriented leverage",
      "bs": "distributed harness users"
    }
  },
  {
    "id": "873a3074-fd5a-4acb-acac-fe837de4bd46",
    "name": "Dario Bartoletti",
    "username": "Joelle.Reichel80",
    "email": "Reese_Fritsch@yahoo.com",
    "address": {
      "street": "Senger River",
      "suite": 85063,
      "city": "New Alexannehaven",
      "zipcode": "28013",
      "geo": {
        "lat": "4.5744",
        "lng": "-8.1006"
      }
    },
    "phone": "895-871-9917 x9207",
    "website": "garnet.net",
    "company": {
      "name": "Glover LLC",
      "catchPhrase": "Customer-focused didactic hub",
      "bs": "cross-media deploy markets"
    }
  },
  {
    "id": "93612c89-81e5-4ffc-a7df-9cf2daf96a30",
    "name": "Freida Streich",
    "username": "Nicholas.Bins76",
    "email": "Alexie.Crist28@yahoo.com",
    "address": {
      "street": "Kenny Mission",
      "suite": 16906,
      "city": "Tedberg",
      "zipcode": "73482",
      "geo": {
        "lat": "52.3191",
        "lng": "-42.2648"
      }
    },
    "phone": "1-466-551-4255 x7565",
    "website": "dee.net",
    "company": {
      "name": "Volkman - Mosciski",
      "catchPhrase": "Programmable interactive collaboration",
      "bs": "web-enabled visualize markets"
    }
  },
  {
    "id": "a6a4204f-e922-4f32-9152-d844a1a7af0e",
    "name": "Kolby Wiza",
    "username": "Amelie17",
    "email": "Zachery.Stokes@yahoo.com",
    "address": {
      "street": "Meghan Mills",
      "suite": 45254,
      "city": "Lake Aliya",
      "zipcode": "74176",
      "geo": {
        "lat": "25.3269",
        "lng": "-159.8734"
      }
    },
    "phone": "487-164-4710 x3153",
    "website": "brionna.name",
    "company": {
      "name": "Collins Inc",
      "catchPhrase": "Seamless foreground adapter",
      "bs": "wireless empower interfaces"
    }
  },
  {
    "id": "be5aeb0d-76d0-4d24-90c1-87d4199d8fba",
    "name": "Zechariah Batz",
    "username": "Hanna_Huels",
    "email": "Maximus53@hotmail.com",
    "address": {
      "street": "Garland Cove",
      "suite": 34577,
      "city": "West Trystan",
      "zipcode": "35167-6091",
      "geo": {
        "lat": "51.4329",
        "lng": "-27.1555"
      }
    },
    "phone": "620.836.6903 x77614",
    "website": "alfredo.org",
    "company": {
      "name": "Kuvalis LLC",
      "catchPhrase": "Up-sized analyzing architecture",
      "bs": "best-of-breed cultivate portals"
    }
  },
  {
    "id": "637d17f1-fe73-4a9f-8b9d-e71e389963dd",
    "name": "Freida Greenfelder",
    "username": "Harmony.Berge",
    "email": "Genoveva69@hotmail.com",
    "address": {
      "street": "Marquardt Shoals",
      "suite": 28335,
      "city": "Schustertown",
      "zipcode": "92743",
      "geo": {
        "lat": "-0.3118",
        "lng": "166.2495"
      }
    },
    "phone": "(784) 165-4589",
    "website": "rick.net",
    "company": {
      "name": "Yost - Purdy",
      "catchPhrase": "Triple-buffered directional implementation",
      "bs": "bleeding-edge productize schemas"
    }
  },
  {
    "id": "af05ec26-e3ce-40e1-b97f-b2c844003b14",
    "name": "Alena Balistreri",
    "username": "Lucile.Schowalter",
    "email": "Trystan25@hotmail.com",
    "address": {
      "street": "Keebler Street",
      "suite": 27838,
      "city": "New Bonita",
      "zipcode": "99150",
      "geo": {
        "lat": "-23.6314",
        "lng": "43.8825"
      }
    },
    "phone": "(060) 395-4199",
    "website": "dorian.biz",
    "company": {
      "name": "Goodwin, VonRueden and Brown",
      "catchPhrase": "Versatile bifurcated contingency",
      "bs": "cutting-edge harness convergence"
    }
  },
  {
    "id": "1d3e1784-00de-403e-a1ee-bb4f6811701f",
    "name": "Jaida Pfeffer",
    "username": "Morgan.Rippin",
    "email": "Ilene69@yahoo.com",
    "address": {
      "street": "Lehner Rest",
      "suite": 7055,
      "city": "Stammburgh",
      "zipcode": "14115",
      "geo": {
        "lat": "-61.1946",
        "lng": "-57.0090"
      }
    },
    "phone": "958.280.7989 x1915",
    "website": "melyna.net",
    "company": {
      "name": "Koepp - Kohler",
      "catchPhrase": "User-centric discrete capacity",
      "bs": "e-business e-enable functionalities"
    }
  },
  {
    "id": "c8f7dc07-4834-496d-9820-05b30ad10691",
    "name": "Adonis Zieme",
    "username": "Royce95",
    "email": "Roxane_Morissette72@gmail.com",
    "address": {
      "street": "Candace Heights",
      "suite": 95349,
      "city": "West Caliside",
      "zipcode": "28825",
      "geo": {
        "lat": "-63.3511",
        "lng": "-160.0799"
      }
    },
    "phone": "790-423-4573",
    "website": "geraldine.com",
    "company": {
      "name": "Schuster, Pagac and Collins",
      "catchPhrase": "Managed coherent hierarchy",
      "bs": "B2B implement ROI"
    }
  }
]
Selected values:
[
  {
    "id": "7d9683d5-b21f-460e-aa42-ddc1743d5cb5",
    "name": "Columbus Marks",
    "username": "Jovany50",
    "email": "Bert36@gmail.com",
    "address": {
      "street": "Donna Highway",
      "suite": 22167,
      "city": "Marianneton",
      "zipcode": "51640-8960",
      "geo": {
        "lat": "-18.8721",
        "lng": "59.8262"
      }
    },
    "phone": "774-161-1971 x216",
    "website": "chaya.info",
    "company": {
      "name": "Cole - O'Hara",
      "catchPhrase": "Self-enabling discrete productivity",
      "bs": "real-time embrace portals"
    }
  }
]