v4.11.4

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": "d0e6e2c8-52a3-4fee-b068-6b0981545052",
    "name": "Tess Breitenberg",
    "username": "Vincent91",
    "email": "Leanne_Bins@hotmail.com",
    "address": {
      "street": "Brooklyn Green",
      "suite": 38525,
      "city": "Cambridge",
      "zipcode": "59218",
      "geo": {
        "lat": "-87.0898",
        "lng": "37.9883"
      }
    },
    "phone": "806-293-5274 x97296",
    "website": "right-beast.info",
    "company": {
      "name": "Murphy, Nicolas and Stroman",
      "catchPhrase": "Down-sized needs-based time-frame",
      "bs": "seize sticky interfaces"
    }
  },
  {
    "id": "e4c6e694-3469-4828-a989-ced090a7951e",
    "name": "Loy Bailey",
    "username": "Maximillian_Murazik18",
    "email": "Murphy.Predovic@hotmail.com",
    "address": {
      "street": "Johnston Fords",
      "suite": 29159,
      "city": "Oberbrunnerstad",
      "zipcode": "88808-5773",
      "geo": {
        "lat": "-69.6983",
        "lng": "-108.6035"
      }
    },
    "phone": "430.946.4045 x32501",
    "website": "digital-punctuation.biz",
    "company": {
      "name": "Murphy - Gorczany",
      "catchPhrase": "Robust bifurcated forecast",
      "bs": "disintermediate real-time applications"
    }
  },
  {
    "id": "e681ffba-a456-442e-bfc1-9844a1d7e3f8",
    "name": "Kip Stoltenberg",
    "username": "Colin.Bechtelar",
    "email": "Tyrique.Kreiger@gmail.com",
    "address": {
      "street": "Eda Shore",
      "suite": 42540,
      "city": "New Karen",
      "zipcode": "54900",
      "geo": {
        "lat": "30.4427",
        "lng": "72.1075"
      }
    },
    "phone": "1-349-328-6025 x43040",
    "website": "dutiful-creature.info",
    "company": {
      "name": "Baumbach, Okuneva and Fisher",
      "catchPhrase": "Cross-platform eco-centric groupware",
      "bs": "synthesize web-enabled convergence"
    }
  },
  {
    "id": "95d4ed85-3603-41f0-8274-61e0ae1609b5",
    "name": "Sherwood Macejkovic",
    "username": "Murl39",
    "email": "Gabrielle69@yahoo.com",
    "address": {
      "street": "Daren Trail",
      "suite": 72773,
      "city": "West Sigmundbury",
      "zipcode": "06976-2823",
      "geo": {
        "lat": "-3.1493",
        "lng": "26.6207"
      }
    },
    "phone": "1-357-867-9058 x381",
    "website": "frayed-consent.com",
    "company": {
      "name": "Frami Inc",
      "catchPhrase": "Synergistic actuating database",
      "bs": "extend compelling architectures"
    }
  },
  {
    "id": "d3ca3bec-145b-4b96-92a8-b656939b79eb",
    "name": "Jordane Carroll",
    "username": "Lawrence.Heaney65",
    "email": "Wyman36@yahoo.com",
    "address": {
      "street": "Camila Loop",
      "suite": 99820,
      "city": "West Ayla",
      "zipcode": "21593",
      "geo": {
        "lat": "62.1974",
        "lng": "-67.9668"
      }
    },
    "phone": "(575) 959-0211 x674",
    "website": "musty-cross-stitch.biz",
    "company": {
      "name": "Herman - Pollich",
      "catchPhrase": "Enterprise-wide analyzing attitude",
      "bs": "engineer ubiquitous e-markets"
    }
  },
  {
    "id": "511b736f-b179-4ddd-8e80-4afa5345e669",
    "name": "Bethel Shanahan",
    "username": "Joanne.Ward77",
    "email": "Conrad0@hotmail.com",
    "address": {
      "street": "Kerluke Center",
      "suite": 43726,
      "city": "Octaviatown",
      "zipcode": "15823",
      "geo": {
        "lat": "10.8792",
        "lng": "-99.8231"
      }
    },
    "phone": "383-239-9198 x209",
    "website": "verifiable-tolerance.org",
    "company": {
      "name": "Jacobi Group",
      "catchPhrase": "Open-architected stable productivity",
      "bs": "cultivate impactful e-business"
    }
  },
  {
    "id": "be8b3e51-e517-403a-9505-8e612bd7c78f",
    "name": "Diana Russel",
    "username": "Zakary.OKeefe",
    "email": "Stephanie.Altenwerth@yahoo.com",
    "address": {
      "street": "Louie Viaduct",
      "suite": 37439,
      "city": "Mansfield",
      "zipcode": "14479",
      "geo": {
        "lat": "78.7539",
        "lng": "-80.9580"
      }
    },
    "phone": "462-332-5342 x8912",
    "website": "basic-durian.name",
    "company": {
      "name": "Mohr LLC",
      "catchPhrase": "User-friendly mission-critical approach",
      "bs": "engineer compelling infrastructures"
    }
  },
  {
    "id": "e5fdfb36-a56c-48bf-bf6e-f03478fc556b",
    "name": "Kay Christiansen",
    "username": "Jackson_Hayes6",
    "email": "Reba.Hilpert@gmail.com",
    "address": {
      "street": "Sauer Trafficway",
      "suite": 22272,
      "city": "Vanessaview",
      "zipcode": "15720-5512",
      "geo": {
        "lat": "0.3278",
        "lng": "147.3674"
      }
    },
    "phone": "(262) 324-8626 x491",
    "website": "humming-end.biz",
    "company": {
      "name": "Rippin, Hessel and Macejkovic",
      "catchPhrase": "Compatible zero defect workforce",
      "bs": "incubate one-to-one technologies"
    }
  },
  {
    "id": "e2d44f86-d317-424c-9599-bd210fa2ad8e",
    "name": "Amie Dietrich",
    "username": "Robbie48",
    "email": "Vilma_Reichel96@yahoo.com",
    "address": {
      "street": "Lehner Estates",
      "suite": 96700,
      "city": "Clarksville",
      "zipcode": "50556",
      "geo": {
        "lat": "-37.9562",
        "lng": "123.4153"
      }
    },
    "phone": "(378) 255-7665 x486",
    "website": "warm-mailbox.name",
    "company": {
      "name": "Casper, Deckow and Buckridge",
      "catchPhrase": "Mandatory composite forecast",
      "bs": "embrace out-of-the-box users"
    }
  },
  {
    "id": "763208ee-5ec7-47e4-89cd-f23516c44bc1",
    "name": "Issac McLaughlin",
    "username": "Maye53",
    "email": "Rosamond.Lang@hotmail.com",
    "address": {
      "street": "Walter Passage",
      "suite": 84541,
      "city": "South Dakotamouth",
      "zipcode": "19503-9829",
      "geo": {
        "lat": "-12.6460",
        "lng": "128.9474"
      }
    },
    "phone": "932.389.0929",
    "website": "dopey-avocado.name",
    "company": {
      "name": "Will Group",
      "catchPhrase": "Balanced asynchronous circuit",
      "bs": "implement dynamic supply-chains"
    }
  },
  {
    "id": "a378a494-0101-482b-893c-6b5ea201fb1c",
    "name": "Antonia Mante",
    "username": "Lilla.Skiles7",
    "email": "Jermaine.Gutmann@gmail.com",
    "address": {
      "street": "Queen Road",
      "suite": 26645,
      "city": "Shadville",
      "zipcode": "20897",
      "geo": {
        "lat": "33.9834",
        "lng": "-125.4934"
      }
    },
    "phone": "528-402-5015 x47837",
    "website": "turbulent-chug.biz",
    "company": {
      "name": "Swift, Ratke and Leuschke",
      "catchPhrase": "Streamlined modular capacity",
      "bs": "envisioneer synergistic solutions"
    }
  },
  {
    "id": "673597a8-3deb-4031-9378-139673433a54",
    "name": "Eve Ortiz",
    "username": "Laverne37",
    "email": "Kellie.Bayer@gmail.com",
    "address": {
      "street": "Luettgen Ville",
      "suite": 82658,
      "city": "Port Isabellemouth",
      "zipcode": "81507",
      "geo": {
        "lat": "57.3349",
        "lng": "111.1864"
      }
    },
    "phone": "(629) 595-7668 x1084",
    "website": "shrill-tumbler.com",
    "company": {
      "name": "Heaney - MacGyver",
      "catchPhrase": "Self-enabling systematic help-desk",
      "bs": "iterate impactful communities"
    }
  },
  {
    "id": "146d37e2-9856-4ae3-b860-e578d41b86a5",
    "name": "Kaleigh Daniel",
    "username": "Tabitha62",
    "email": "Albin_Becker46@gmail.com",
    "address": {
      "street": "Watsica Street",
      "suite": 16411,
      "city": "Lake Cadeport",
      "zipcode": "58220",
      "geo": {
        "lat": "71.2817",
        "lng": "-87.9724"
      }
    },
    "phone": "811.616.5245 x56725",
    "website": "messy-sledge.name",
    "company": {
      "name": "Wiegand, Hagenes and Heathcote",
      "catchPhrase": "Implemented 4th generation infrastructure",
      "bs": "optimize rich deliverables"
    }
  },
  {
    "id": "ff293890-4e96-421b-a50d-c1de2c7fcb07",
    "name": "Skye Balistreri",
    "username": "Elise34",
    "email": "Clementina.Nader@hotmail.com",
    "address": {
      "street": "Berge Valley",
      "suite": 59785,
      "city": "New Mabelle",
      "zipcode": "90830-3510",
      "geo": {
        "lat": "-53.1983",
        "lng": "52.6500"
      }
    },
    "phone": "1-355-616-1136 x937",
    "website": "famous-recruit.biz",
    "company": {
      "name": "Dibbert Inc",
      "catchPhrase": "Virtual background superstructure",
      "bs": "reintermediate vertical e-markets"
    }
  },
  {
    "id": "901f097a-a2ee-4657-bf3e-16a5c80ed6df",
    "name": "Luigi Leuschke",
    "username": "Aryanna_Pollich",
    "email": "Litzy.Robel20@gmail.com",
    "address": {
      "street": "Delbert Creek",
      "suite": 1347,
      "city": "West Louborough",
      "zipcode": "02151-4285",
      "geo": {
        "lat": "-8.5642",
        "lng": "9.3057"
      }
    },
    "phone": "575-718-5822 x77433",
    "website": "corrupt-wholesale.com",
    "company": {
      "name": "Price - Fisher",
      "catchPhrase": "Intuitive impactful product",
      "bs": "revolutionize e-business mindshare"
    }
  },
  {
    "id": "d6dfc296-1bef-4915-af75-45e37302d936",
    "name": "Claud Fisher",
    "username": "Gregory_Batz30",
    "email": "Jordyn_Farrell38@hotmail.com",
    "address": {
      "street": "Orion Mill",
      "suite": 95319,
      "city": "Noemieview",
      "zipcode": "26856",
      "geo": {
        "lat": "87.2108",
        "lng": "-53.8961"
      }
    },
    "phone": "(247) 416-4376 x6040",
    "website": "electric-clarinet.com",
    "company": {
      "name": "Mohr - Jaskolski",
      "catchPhrase": "Multi-layered bandwidth-monitored solution",
      "bs": "whiteboard seamless architectures"
    }
  },
  {
    "id": "c3a3ad54-d48f-4a46-9bde-ef336438bc3d",
    "name": "Hayden Murray",
    "username": "Barry19",
    "email": "Sadye.Stark@gmail.com",
    "address": {
      "street": "Lind Crescent",
      "suite": 13712,
      "city": "Victorville",
      "zipcode": "53395",
      "geo": {
        "lat": "-47.3122",
        "lng": "-36.9644"
      }
    },
    "phone": "1-878-748-3030",
    "website": "worried-crap.biz",
    "company": {
      "name": "Larson, Collins and Effertz",
      "catchPhrase": "Seamless mobile open system",
      "bs": "benchmark enterprise systems"
    }
  },
  {
    "id": "4390a710-23ba-434e-8490-ea83e7b03d0d",
    "name": "Dahlia Weber",
    "username": "Ernestina21",
    "email": "Vernice11@hotmail.com",
    "address": {
      "street": "Ruecker Glen",
      "suite": 56343,
      "city": "New Ramonmouth",
      "zipcode": "08626",
      "geo": {
        "lat": "83.9417",
        "lng": "-139.1373"
      }
    },
    "phone": "(515) 672-5549",
    "website": "lazy-shopper.name",
    "company": {
      "name": "Auer Group",
      "catchPhrase": "Cloned heuristic parallelism",
      "bs": "unleash best-of-breed markets"
    }
  },
  {
    "id": "26ee47b3-3792-4e88-acf2-31dac97b455e",
    "name": "Jonas Hirthe",
    "username": "Elise94",
    "email": "Martina60@gmail.com",
    "address": {
      "street": "Crooks Lake",
      "suite": 20195,
      "city": "Lawrence",
      "zipcode": "84852",
      "geo": {
        "lat": "-67.6514",
        "lng": "-165.0018"
      }
    },
    "phone": "(556) 401-7340 x284",
    "website": "thick-beauty.org",
    "company": {
      "name": "Conroy Group",
      "catchPhrase": "Devolved didactic groupware",
      "bs": "reintermediate real-time schemas"
    }
  },
  {
    "id": "da548a4e-0d5e-4983-addd-8597dd173001",
    "name": "Destiney Haley",
    "username": "Holden_Hudson",
    "email": "Hillary.Sawayn91@gmail.com",
    "address": {
      "street": "Feil Drives",
      "suite": 47269,
      "city": "Lake Elody",
      "zipcode": "98822-0202",
      "geo": {
        "lat": "-73.7554",
        "lng": "-103.8684"
      }
    },
    "phone": "1-845-654-1345",
    "website": "lonely-nerve.name",
    "company": {
      "name": "Ledner - Funk",
      "catchPhrase": "Mandatory global collaboration",
      "bs": "orchestrate B2B relationships"
    }
  },
  {
    "id": "b69ada49-a349-4de5-b4df-e00de0cd9b69",
    "name": "Hanna Schneider",
    "username": "Devan70",
    "email": "Terry_Flatley53@gmail.com",
    "address": {
      "street": "Daren Landing",
      "suite": 3317,
      "city": "Yundtborough",
      "zipcode": "31609-0624",
      "geo": {
        "lat": "-31.0993",
        "lng": "125.1394"
      }
    },
    "phone": "(329) 588-5562",
    "website": "long-quiet.com",
    "company": {
      "name": "Fay, Hand and Senger",
      "catchPhrase": "Operative encompassing pricing structure",
      "bs": "expedite efficient solutions"
    }
  },
  {
    "id": "10481fad-e1a1-405b-aa4f-b8587cef9c77",
    "name": "Dayna Sanford",
    "username": "Curtis12",
    "email": "Dena8@yahoo.com",
    "address": {
      "street": "Margie Station",
      "suite": 11758,
      "city": "Leonemouth",
      "zipcode": "36610",
      "geo": {
        "lat": "-75.7485",
        "lng": "168.3807"
      }
    },
    "phone": "1-712-423-3251 x4963",
    "website": "juvenile-freon.info",
    "company": {
      "name": "Moore Inc",
      "catchPhrase": "Organic intangible internet solution",
      "bs": "brand cross-media e-tailers"
    }
  },
  {
    "id": "f21c6646-4034-412d-bb16-957b483aa4f7",
    "name": "Nick Simonis",
    "username": "Judy_OKeefe",
    "email": "Ryder.Sipes@gmail.com",
    "address": {
      "street": "Kertzmann Highway",
      "suite": 99756,
      "city": "Harrisburg",
      "zipcode": "70655",
      "geo": {
        "lat": "-65.6663",
        "lng": "60.8600"
      }
    },
    "phone": "(583) 204-8425",
    "website": "hungry-lizard.net",
    "company": {
      "name": "Schuppe - Batz",
      "catchPhrase": "Networked grid-enabled help-desk",
      "bs": "facilitate best-of-breed bandwidth"
    }
  },
  {
    "id": "9c905be9-a9fa-4b6d-8749-6a54848d91f8",
    "name": "April Hudson",
    "username": "Laury_Parker",
    "email": "Rita.Kuhn80@gmail.com",
    "address": {
      "street": "Ebert Mills",
      "suite": 24034,
      "city": "Michalefort",
      "zipcode": "05673",
      "geo": {
        "lat": "38.2291",
        "lng": "-68.5607"
      }
    },
    "phone": "1-682-388-5757 x967",
    "website": "untrue-signup.org",
    "company": {
      "name": "Gutmann LLC",
      "catchPhrase": "Open-source composite adapter",
      "bs": "matrix interactive portals"
    }
  },
  {
    "id": "92b1ee1b-309a-407a-a041-64022bcc55f8",
    "name": "Saul Dicki",
    "username": "Dillan.Morissette19",
    "email": "Jaunita_Veum@yahoo.com",
    "address": {
      "street": "Caitlyn Spur",
      "suite": 14243,
      "city": "Lake Vicenta",
      "zipcode": "34277",
      "geo": {
        "lat": "59.7666",
        "lng": "-145.9353"
      }
    },
    "phone": "1-361-720-3663",
    "website": "wrong-behalf.name",
    "company": {
      "name": "Veum and Sons",
      "catchPhrase": "Mandatory disintermediate orchestration",
      "bs": "embrace scalable infrastructures"
    }
  },
  {
    "id": "69a3b53e-23cc-4c35-bcbc-3299e6f2761f",
    "name": "Ernestine Ledner",
    "username": "June79",
    "email": "Bria.Spinka12@hotmail.com",
    "address": {
      "street": "Stamm Corner",
      "suite": 88523,
      "city": "East Meaghanbury",
      "zipcode": "40535-7974",
      "geo": {
        "lat": "-42.8706",
        "lng": "5.9584"
      }
    },
    "phone": "223.328.5487",
    "website": "unhappy-cantaloupe.name",
    "company": {
      "name": "Hills - Murray",
      "catchPhrase": "Implemented radical ability",
      "bs": "transform best-of-breed ROI"
    }
  },
  {
    "id": "9e986c6e-f519-4642-bd15-432bd41ddd39",
    "name": "Myrtis Botsford",
    "username": "Bernadette.Bins49",
    "email": "Cleve.Kerluke52@yahoo.com",
    "address": {
      "street": "Christa Heights",
      "suite": 51569,
      "city": "La Crosse",
      "zipcode": "59218",
      "geo": {
        "lat": "-3.5126",
        "lng": "-111.4249"
      }
    },
    "phone": "(461) 533-1950 x2066",
    "website": "sympathetic-palace.com",
    "company": {
      "name": "Carter - Mayert",
      "catchPhrase": "Team-oriented context-sensitive conglomeration",
      "bs": "matrix holistic supply-chains"
    }
  },
  {
    "id": "5ec99f86-1146-49c2-8b23-6c5bdcae523a",
    "name": "Monroe Ortiz",
    "username": "Tanner70",
    "email": "Ricky.Bailey44@yahoo.com",
    "address": {
      "street": "Steuber Tunnel",
      "suite": 84746,
      "city": "North Jed",
      "zipcode": "93681-5405",
      "geo": {
        "lat": "9.0918",
        "lng": "64.5746"
      }
    },
    "phone": "1-427-979-3113 x4557",
    "website": "zealous-fuel.info",
    "company": {
      "name": "Robel Inc",
      "catchPhrase": "Enhanced coherent internet solution",
      "bs": "revolutionize granular networks"
    }
  },
  {
    "id": "bc8b4dd6-fd5c-4264-acdd-97700440cc21",
    "name": "Jerrold Botsford",
    "username": "Payton.McCullough",
    "email": "Kassandra_Gaylord@hotmail.com",
    "address": {
      "street": "Schuster Mountains",
      "suite": 50133,
      "city": "Roryfurt",
      "zipcode": "28775",
      "geo": {
        "lat": "-86.5277",
        "lng": "-83.6180"
      }
    },
    "phone": "626.564.5008 x9065",
    "website": "tough-contingency.info",
    "company": {
      "name": "Lehner, Larson and Bradtke",
      "catchPhrase": "Extended user-facing projection",
      "bs": "cultivate next-generation e-commerce"
    }
  },
  {
    "id": "76b01211-fa2f-4463-83a8-e04a7b36805e",
    "name": "Alf Sporer",
    "username": "Gretchen_Hane50",
    "email": "Parker.Ratke@hotmail.com",
    "address": {
      "street": "Caterina Summit",
      "suite": 90464,
      "city": "North Brennanview",
      "zipcode": "36734",
      "geo": {
        "lat": "81.5795",
        "lng": "-147.0114"
      }
    },
    "phone": "430-774-8064",
    "website": "breakable-young.name",
    "company": {
      "name": "MacGyver Group",
      "catchPhrase": "Public-key 5th generation Graphical User Interface",
      "bs": "disintermediate magnetic e-business"
    }
  }
]
Selected values:
[
  {
    "id": "95d4ed85-3603-41f0-8274-61e0ae1609b5",
    "name": "Sherwood Macejkovic",
    "username": "Murl39",
    "email": "Gabrielle69@yahoo.com",
    "address": {
      "street": "Daren Trail",
      "suite": 72773,
      "city": "West Sigmundbury",
      "zipcode": "06976-2823",
      "geo": {
        "lat": "-3.1493",
        "lng": "26.6207"
      }
    },
    "phone": "1-357-867-9058 x381",
    "website": "frayed-consent.com",
    "company": {
      "name": "Frami Inc",
      "catchPhrase": "Synergistic actuating database",
      "bs": "extend compelling architectures"
    }
  }
]