Customisable dropdown select/multi-select component for react with custom render callback props to override inner components
SHELLnpm install --save react-dropdown-selectJSXimport Select from 'react-dropdown-select';
export const App = ({ options }) => (
<Select
multi
options={options}
onChange={(values) => this.onChange(values)}
/>
);
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:
[
{
"id": "db7d438d-753a-46e7-90f6-b15e472bf2ba",
"name": "Carleton Wyman",
"username": "Donnell_Bosco68",
"email": "Kenneth72@gmail.com",
"address": {
"street": "Eric Tunnel",
"suite": 25738,
"city": "Botsfordfurt",
"zipcode": "70462",
"geo": {
"lat": "83.9546",
"lng": "-131.5490"
}
},
"phone": "1-911-641-4236",
"website": "superior-feeling.org",
"company": {
"name": "Shields - Crona",
"catchPhrase": "Programmable exuding hub",
"bs": "streamline intuitive content"
}
},
{
"id": "18a7faec-c611-465b-8574-f18194702aec",
"name": "Vivianne Wiza",
"username": "Ramona_Rice",
"email": "Layla19@hotmail.com",
"address": {
"street": "Finn Shoals",
"suite": 32603,
"city": "Port Amberhaven",
"zipcode": "51423",
"geo": {
"lat": "6.8135",
"lng": "-42.4630"
}
},
"phone": "600-721-7015 x8412",
"website": "vast-trophy.biz",
"company": {
"name": "Rohan - Jast",
"catchPhrase": "Persevering multi-tasking approach",
"bs": "productize world-class e-markets"
}
},
{
"id": "a0a6fa64-72dc-4dd9-b347-2ad08e3969d9",
"name": "Filiberto McCullough",
"username": "Reymundo19",
"email": "Cristina.Legros91@gmail.com",
"address": {
"street": "Huel Expressway",
"suite": 52776,
"city": "Port Nakia",
"zipcode": "97209",
"geo": {
"lat": "-7.2269",
"lng": "-133.3685"
}
},
"phone": "311-871-1933",
"website": "stupendous-fen.biz",
"company": {
"name": "Beer - Ruecker",
"catchPhrase": "Grass-roots 3rd generation middleware",
"bs": "seize global content"
}
},
{
"id": "a21e2f9b-8505-4744-9fc3-b04e5f880ad1",
"name": "Carmen Mante",
"username": "Hyman_OConnell92",
"email": "Remington55@gmail.com",
"address": {
"street": "Marina Ville",
"suite": 52186,
"city": "Rashadville",
"zipcode": "91116-9289",
"geo": {
"lat": "64.7967",
"lng": "-136.4070"
}
},
"phone": "1-691-224-4381 x886",
"website": "vibrant-roundabout.name",
"company": {
"name": "Schmeler - Pfannerstill",
"catchPhrase": "Front-line explicit circuit",
"bs": "innovate B2C bandwidth"
}
},
{
"id": "ec07c670-edbd-45bc-ba95-d8f588160ff4",
"name": "Ines Willms",
"username": "Fern74",
"email": "Talon_Kunze@yahoo.com",
"address": {
"street": "Winston Circles",
"suite": 59480,
"city": "Maeveside",
"zipcode": "47801",
"geo": {
"lat": "28.2238",
"lng": "-138.5124"
}
},
"phone": "960.425.3327",
"website": "wavy-step-grandfather.com",
"company": {
"name": "Crist LLC",
"catchPhrase": "Focused content-based project",
"bs": "orchestrate global action-items"
}
},
{
"id": "7ba901b1-ff60-4ade-b5ca-175db3661c9f",
"name": "Fabian King",
"username": "Romaine.Keebler",
"email": "Deven.Schultz79@hotmail.com",
"address": {
"street": "Bahringer Junctions",
"suite": 54904,
"city": "Lake Bettye",
"zipcode": "18622-7993",
"geo": {
"lat": "-85.5804",
"lng": "139.6629"
}
},
"phone": "(850) 895-7898 x613",
"website": "happy-kilometer.info",
"company": {
"name": "Yost, Hoeger and Schuppe",
"catchPhrase": "Automated didactic concept",
"bs": "target user-centric portals"
}
},
{
"id": "e72fc79b-73b2-4917-a463-48ff79de1113",
"name": "Amie Kertzmann",
"username": "Ricky_Terry",
"email": "Haskell.Howe@gmail.com",
"address": {
"street": "Ludwig Ports",
"suite": 7356,
"city": "Christiansenton",
"zipcode": "15429",
"geo": {
"lat": "-55.0132",
"lng": "132.6602"
}
},
"phone": "(341) 362-6242 x06531",
"website": "sunny-espadrille.net",
"company": {
"name": "Nienow - Mohr",
"catchPhrase": "Enhanced cohesive protocol",
"bs": "innovate transparent communities"
}
},
{
"id": "3453a5a0-d1e9-4ec3-bc57-d0be0b595aed",
"name": "Jadyn O'Hara",
"username": "Kole.Bradtke",
"email": "Earnest.Morar92@hotmail.com",
"address": {
"street": "Fritsch Valleys",
"suite": 85907,
"city": "Silashaven",
"zipcode": "16564-6516",
"geo": {
"lat": "15.1916",
"lng": "-153.2119"
}
},
"phone": "810.812.5154",
"website": "conscious-genre.name",
"company": {
"name": "Emard, Parisian and Lueilwitz",
"catchPhrase": "Exclusive didactic extranet",
"bs": "strategize virtual niches"
}
},
{
"id": "3ad166df-d733-4918-bc85-81bf90447f1f",
"name": "Josie Lueilwitz",
"username": "Orion85",
"email": "Gage.Marquardt32@yahoo.com",
"address": {
"street": "Leif Circles",
"suite": 19440,
"city": "Eloisaland",
"zipcode": "76210-6334",
"geo": {
"lat": "-55.1822",
"lng": "0.3187"
}
},
"phone": "1-858-651-1671",
"website": "uncomfortable-bricklaying.biz",
"company": {
"name": "McKenzie - Schmidt",
"catchPhrase": "Innovative heuristic installation",
"bs": "revolutionize global e-commerce"
}
},
{
"id": "073462de-f632-4755-a44a-8991597a994c",
"name": "Deanna Mayer",
"username": "Sunny14",
"email": "Zachary_Dietrich@hotmail.com",
"address": {
"street": "Dach Island",
"suite": 33885,
"city": "North Majorberg",
"zipcode": "51653-2410",
"geo": {
"lat": "36.7815",
"lng": "77.5361"
}
},
"phone": "256.445.4951",
"website": "meager-boogeyman.info",
"company": {
"name": "Bartell - Mayer",
"catchPhrase": "Realigned disintermediate hardware",
"bs": "reintermediate best-of-breed e-services"
}
},
{
"id": "c42a5430-40e5-437a-9c27-616651eaffe3",
"name": "Rosetta Pollich",
"username": "Dedric_Schuster",
"email": "Joany_Hoeger38@yahoo.com",
"address": {
"street": "Dare Turnpike",
"suite": 60180,
"city": "Swiftville",
"zipcode": "56556-1370",
"geo": {
"lat": "-67.1964",
"lng": "45.7531"
}
},
"phone": "(674) 442-8895 x963",
"website": "pristine-socialism.info",
"company": {
"name": "Haag Group",
"catchPhrase": "Networked logistical open architecture",
"bs": "productize magnetic interfaces"
}
},
{
"id": "b6fb6490-11a0-4618-9371-ee1014849a88",
"name": "Henri Ledner",
"username": "Ken.Cormier",
"email": "Millie_McKenzie59@gmail.com",
"address": {
"street": "Beahan Way",
"suite": 65920,
"city": "Marquardtside",
"zipcode": "49361",
"geo": {
"lat": "38.1347",
"lng": "70.9330"
}
},
"phone": "(325) 706-1154 x4187",
"website": "wonderful-boom.org",
"company": {
"name": "Schuster - Kautzer",
"catchPhrase": "Face to face contextually-based superstructure",
"bs": "utilize 24/365 infomediaries"
}
},
{
"id": "a65aa4ce-cc45-490e-a6dd-b07e3327aab1",
"name": "Sarai Barton",
"username": "Maci_Luettgen",
"email": "Raquel40@hotmail.com",
"address": {
"street": "Bednar Park",
"suite": 9228,
"city": "Hudsonland",
"zipcode": "30580",
"geo": {
"lat": "25.4593",
"lng": "115.9216"
}
},
"phone": "(915) 810-9243",
"website": "tremendous-standoff.biz",
"company": {
"name": "O'Keefe, Ernser and Champlin",
"catchPhrase": "Object-based methodical orchestration",
"bs": "maximize killer networks"
}
},
{
"id": "64dd3a38-7ef8-4e64-9297-9fa92f2d0d38",
"name": "Giuseppe McCullough",
"username": "Terrill.Armstrong",
"email": "Alva12@yahoo.com",
"address": {
"street": "Nitzsche Bypass",
"suite": 14729,
"city": "New Adelbertside",
"zipcode": "61043-7719",
"geo": {
"lat": "3.5285",
"lng": "35.8712"
}
},
"phone": "711.726.4152",
"website": "male-pendant.org",
"company": {
"name": "Kirlin, Mueller and Armstrong",
"catchPhrase": "Adaptive national challenge",
"bs": "target plug-and-play interfaces"
}
},
{
"id": "3ba1bb49-3e64-4452-a684-12e98336dbf9",
"name": "Brandon Schinner",
"username": "Adrain.Fisher",
"email": "Maryam_Howell94@gmail.com",
"address": {
"street": "Schimmel Dam",
"suite": 3080,
"city": "Cristianhaven",
"zipcode": "23865-4714",
"geo": {
"lat": "-12.8761",
"lng": "-130.4575"
}
},
"phone": "489-792-9883 x8669",
"website": "uneven-genius.net",
"company": {
"name": "Miller, Kuhic and White",
"catchPhrase": "Profit-focused systemic system engine",
"bs": "morph compelling deliverables"
}
},
{
"id": "13baeeca-02bb-484b-aa1d-585e453d06b5",
"name": "Deangelo Kessler",
"username": "Letitia_King96",
"email": "Dion57@hotmail.com",
"address": {
"street": "Friesen Station",
"suite": 48450,
"city": "Brandonview",
"zipcode": "44462-8376",
"geo": {
"lat": "-66.6459",
"lng": "105.8769"
}
},
"phone": "(576) 809-6825",
"website": "lovely-sack.net",
"company": {
"name": "Koepp, Nikolaus and Macejkovic",
"catchPhrase": "Open-architected 6th generation system engine",
"bs": "aggregate open-source technologies"
}
},
{
"id": "3b9e79f7-ee66-439b-a7f2-e5432ab8144c",
"name": "Mina Schumm",
"username": "Jolie_Marvin41",
"email": "Violette.Collins71@hotmail.com",
"address": {
"street": "Courtney Camp",
"suite": 50366,
"city": "Carmellachester",
"zipcode": "86486",
"geo": {
"lat": "84.6872",
"lng": "178.3399"
}
},
"phone": "(370) 910-5646 x52882",
"website": "belated-fascia.com",
"company": {
"name": "Hand Inc",
"catchPhrase": "Managed multimedia middleware",
"bs": "envisioneer revolutionary web-readiness"
}
},
{
"id": "e9887b82-c0b0-45a9-9c35-0efd7d49463b",
"name": "Sylvan O'Conner",
"username": "Halie56",
"email": "Heber62@yahoo.com",
"address": {
"street": "Feil Via",
"suite": 41275,
"city": "New Adanburgh",
"zipcode": "55711-5185",
"geo": {
"lat": "22.0818",
"lng": "-114.8012"
}
},
"phone": "(994) 419-3710",
"website": "little-mezzanine.com",
"company": {
"name": "Frami, Altenwerth and Stoltenberg",
"catchPhrase": "Seamless logistical monitoring",
"bs": "exploit ubiquitous communities"
}
},
{
"id": "ec28cacb-4bcf-4e78-91fb-1b334df7b91b",
"name": "Mae Emard",
"username": "Lincoln84",
"email": "Catherine.Larson51@gmail.com",
"address": {
"street": "Lane Road",
"suite": 73313,
"city": "Port Emerymouth",
"zipcode": "62235-5685",
"geo": {
"lat": "49.2345",
"lng": "-31.7738"
}
},
"phone": "(372) 378-5023 x43870",
"website": "hilarious-codepage.name",
"company": {
"name": "Miller, Glover and Spencer",
"catchPhrase": "Enhanced neutral flexibility",
"bs": "disintermediate revolutionary infrastructures"
}
},
{
"id": "35d388da-de9a-47ee-90e4-bb7c448d2217",
"name": "Tony Raynor",
"username": "Althea.Schoen17",
"email": "Gilda_Hyatt@yahoo.com",
"address": {
"street": "Stehr Underpass",
"suite": 27772,
"city": "New Susieburgh",
"zipcode": "72019",
"geo": {
"lat": "41.6454",
"lng": "25.4727"
}
},
"phone": "1-567-901-0295",
"website": "aware-improvement.org",
"company": {
"name": "Mayert, Wunsch and Schowalter",
"catchPhrase": "Universal eco-centric firmware",
"bs": "enhance extensible infrastructures"
}
},
{
"id": "21096ef2-ee86-4b3d-8695-b004c2fd061a",
"name": "Lorenzo Schinner",
"username": "Korey.Haag",
"email": "Brook.Schiller26@yahoo.com",
"address": {
"street": "Tillman Extension",
"suite": 93013,
"city": "Annamarieport",
"zipcode": "22657",
"geo": {
"lat": "7.6404",
"lng": "-123.5463"
}
},
"phone": "(228) 377-9558 x2696",
"website": "improbable-helicopter.biz",
"company": {
"name": "Cummerata, Sporer and Strosin",
"catchPhrase": "Virtual asynchronous matrix",
"bs": "revolutionize B2B e-tailers"
}
},
{
"id": "64b7984e-e7fe-4571-8ed1-423ac8b5ac7d",
"name": "Chaya Bogisich",
"username": "Sarai_Klocko",
"email": "Maci.Skiles@gmail.com",
"address": {
"street": "Anya Underpass",
"suite": 53955,
"city": "Farmington Hills",
"zipcode": "60418",
"geo": {
"lat": "38.3841",
"lng": "-91.9242"
}
},
"phone": "824.702.0622",
"website": "glittering-walnut.name",
"company": {
"name": "Sauer, Leffler and Denesik",
"catchPhrase": "Programmable web-enabled pricing structure",
"bs": "incentivize collaborative metrics"
}
},
{
"id": "079842ff-ac52-4359-b19d-a37027425d0e",
"name": "Adaline Rau",
"username": "Ray79",
"email": "Nolan2@hotmail.com",
"address": {
"street": "Eusebio Roads",
"suite": 98016,
"city": "East Alverta",
"zipcode": "11547",
"geo": {
"lat": "-2.8036",
"lng": "-96.2757"
}
},
"phone": "1-313-286-1468 x204",
"website": "voluminous-rule.biz",
"company": {
"name": "Heathcote, Mueller and Farrell",
"catchPhrase": "Mandatory content-based functionalities",
"bs": "envisioneer granular supply-chains"
}
},
{
"id": "a0db4acf-01a5-4001-9f45-78a58cc4fa73",
"name": "Shemar Yost",
"username": "Jaycee_Yost",
"email": "Pierre_Koelpin65@hotmail.com",
"address": {
"street": "Torp Motorway",
"suite": 46376,
"city": "Madisynchester",
"zipcode": "15991-2832",
"geo": {
"lat": "31.1278",
"lng": "-35.4640"
}
},
"phone": "876.910.6151 x4758",
"website": "cultured-skiing.net",
"company": {
"name": "Schamberger - Spinka",
"catchPhrase": "Synchronised systematic access",
"bs": "streamline strategic networks"
}
},
{
"id": "7a2bd570-0de2-47c7-a3e1-1eecea054843",
"name": "Tyrel Hackett",
"username": "Mayra.Lang",
"email": "Liana_Haag@gmail.com",
"address": {
"street": "Kuvalis Prairie",
"suite": 89352,
"city": "Redondo Beach",
"zipcode": "12071-8608",
"geo": {
"lat": "15.2215",
"lng": "-67.9646"
}
},
"phone": "(794) 681-5330",
"website": "knowing-sigh.name",
"company": {
"name": "Terry - Koss",
"catchPhrase": "Total analyzing capability",
"bs": "monetize synergistic e-business"
}
},
{
"id": "74157053-ff28-4ffe-a8fd-2adb05e15007",
"name": "Juana Kerluke",
"username": "Jermaine.Hodkiewicz",
"email": "Rod.Fahey@yahoo.com",
"address": {
"street": "Hansen Drive",
"suite": 49475,
"city": "Conway",
"zipcode": "47459",
"geo": {
"lat": "72.8074",
"lng": "168.5187"
}
},
"phone": "(978) 406-9062",
"website": "precious-affinity.name",
"company": {
"name": "Schoen, Ondricka and Mueller",
"catchPhrase": "Implemented content-based migration",
"bs": "utilize global metrics"
}
},
{
"id": "44b027a1-d751-4dd6-abc7-5c9b658a8962",
"name": "Roscoe Torp",
"username": "Patrick98",
"email": "Roxane31@yahoo.com",
"address": {
"street": "Bergnaum Groves",
"suite": 51807,
"city": "Pagacfurt",
"zipcode": "07516-1281",
"geo": {
"lat": "84.5731",
"lng": "84.6030"
}
},
"phone": "580-271-2429 x8675",
"website": "nimble-thesis.biz",
"company": {
"name": "Satterfield and Sons",
"catchPhrase": "Front-line mission-critical array",
"bs": "cultivate integrated interfaces"
}
},
{
"id": "635380cf-41a2-4a58-9b8e-c64fd0b101e8",
"name": "Christa Lockman",
"username": "Teresa_Stroman",
"email": "Cathy.Nikolaus93@gmail.com",
"address": {
"street": "Grady Inlet",
"suite": 59937,
"city": "Yadiratown",
"zipcode": "98318-4979",
"geo": {
"lat": "-34.9296",
"lng": "161.8061"
}
},
"phone": "220.254.3411",
"website": "keen-sick.org",
"company": {
"name": "Russel LLC",
"catchPhrase": "Adaptive 24/7 standardization",
"bs": "iterate transparent channels"
}
},
{
"id": "ad1e137d-a242-4694-ad4c-faf1c803dd30",
"name": "Blanca King",
"username": "Omari.Zulauf42",
"email": "Jennyfer68@hotmail.com",
"address": {
"street": "Eileen Forks",
"suite": 35443,
"city": "Franeckiborough",
"zipcode": "88786",
"geo": {
"lat": "8.9914",
"lng": "-85.3081"
}
},
"phone": "1-536-783-6717 x27844",
"website": "real-celebrity.info",
"company": {
"name": "King and Sons",
"catchPhrase": "Organic web-enabled application",
"bs": "aggregate global models"
}
},
{
"id": "966f67d0-6a60-4cc0-aeb2-6649ddb9a1cc",
"name": "Deshawn Runolfsdottir",
"username": "Hunter_Feil59",
"email": "Jaiden.Huel@hotmail.com",
"address": {
"street": "Wisozk Extensions",
"suite": 99405,
"city": "Jastville",
"zipcode": "28288-1626",
"geo": {
"lat": "11.4105",
"lng": "135.4208"
}
},
"phone": "(688) 612-6237 x71777",
"website": "harmonious-bolt.com",
"company": {
"name": "Gleason, Pagac and Aufderhar",
"catchPhrase": "Synergized mission-critical database",
"bs": "matrix open-source platforms"
}
}
][
{
"id": "a21e2f9b-8505-4744-9fc3-b04e5f880ad1",
"name": "Carmen Mante",
"username": "Hyman_OConnell92",
"email": "Remington55@gmail.com",
"address": {
"street": "Marina Ville",
"suite": 52186,
"city": "Rashadville",
"zipcode": "91116-9289",
"geo": {
"lat": "64.7967",
"lng": "-136.4070"
}
},
"phone": "1-691-224-4381 x886",
"website": "vibrant-roundabout.name",
"company": {
"name": "Schmeler - Pfannerstill",
"catchPhrase": "Front-line explicit circuit",
"bs": "innovate B2C bandwidth"
}
}
]