v4.0.0

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

Roxanne Dach×

 

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": "381e00ac-7b36-44f0-9fba-3eed88499c96",
    "name": "Magdalena Walter",
    "username": "Kacey5",
    "email": "Tara.Hauck@gmail.com",
    "address": {
      "street": "Janae Lodge",
      "suite": 19047,
      "city": "Rosenbaumtown",
      "zipcode": "11921-2980",
      "geo": {
        "lat": "50.3697",
        "lng": "-126.9892"
      }
    },
    "phone": "1-260-580-2747 x246",
    "website": "warren.biz",
    "company": {
      "name": "Langworth LLC",
      "catchPhrase": "Fully-configurable disintermediate approach",
      "bs": "magnetic disintermediate relationships"
    }
  },
  {
    "id": "131a58a8-8eb9-45ca-bd3c-abf0582355ae",
    "name": "Ryann Schowalter",
    "username": "Reuben.Bogisich",
    "email": "Vallie.Lehner72@gmail.com",
    "address": {
      "street": "Verla Summit",
      "suite": 92040,
      "city": "North Anselberg",
      "zipcode": "01724",
      "geo": {
        "lat": "-47.4169",
        "lng": "-156.0979"
      }
    },
    "phone": "263-203-7287",
    "website": "dwight.name",
    "company": {
      "name": "Jacobi, Walker and Stamm",
      "catchPhrase": "Streamlined fresh-thinking conglomeration",
      "bs": "virtual monetize web-readiness"
    }
  },
  {
    "id": "b7bcff0f-7dc4-46fa-84d7-eee266c1b5e3",
    "name": "Grady Bogan",
    "username": "Peggie_Heller20",
    "email": "Annamarie51@gmail.com",
    "address": {
      "street": "Boyle Grove",
      "suite": 57087,
      "city": "Goldnerfurt",
      "zipcode": "75294-1807",
      "geo": {
        "lat": "20.9522",
        "lng": "-18.5687"
      }
    },
    "phone": "(877) 690-9916 x74427",
    "website": "eliane.net",
    "company": {
      "name": "Jerde Inc",
      "catchPhrase": "Realigned national solution",
      "bs": "distributed drive metrics"
    }
  },
  {
    "id": "ab9ce834-80d6-41e1-9b37-8125afd5cc8f",
    "name": "Roxanne Dach",
    "username": "Frederik.Cruickshank60",
    "email": "Laverna.Schowalter64@yahoo.com",
    "address": {
      "street": "Barton Ranch",
      "suite": 50491,
      "city": "South Urban",
      "zipcode": "12533",
      "geo": {
        "lat": "-24.1109",
        "lng": "-157.3804"
      }
    },
    "phone": "(991) 805-3353 x06644",
    "website": "samson.biz",
    "company": {
      "name": "Nolan and Sons",
      "catchPhrase": "Object-based regional knowledge user",
      "bs": "B2C leverage networks"
    }
  },
  {
    "id": "5e44f0e4-4673-4044-aa52-984e37333a22",
    "name": "Sydnie Hansen",
    "username": "Ashlynn_Stracke98",
    "email": "Vivienne.Bergstrom@gmail.com",
    "address": {
      "street": "Rhoda Views",
      "suite": 77589,
      "city": "West Elnaborough",
      "zipcode": "91067",
      "geo": {
        "lat": "51.5806",
        "lng": "-0.0777"
      }
    },
    "phone": "946.859.2622",
    "website": "rosalia.net",
    "company": {
      "name": "Murray Group",
      "catchPhrase": "Customer-focused multi-state info-mediaries",
      "bs": "mission-critical utilize models"
    }
  },
  {
    "id": "56c08327-2200-4914-a34f-3387b106d509",
    "name": "Ignatius Oberbrunner",
    "username": "Eliane_Lang",
    "email": "Henri56@yahoo.com",
    "address": {
      "street": "Hermann Point",
      "suite": 69682,
      "city": "New Elsachester",
      "zipcode": "62185-7472",
      "geo": {
        "lat": "38.8707",
        "lng": "87.4309"
      }
    },
    "phone": "(849) 313-3582 x714",
    "website": "julius.info",
    "company": {
      "name": "Larson LLC",
      "catchPhrase": "Optimized multi-state middleware",
      "bs": "bleeding-edge disintermediate models"
    }
  },
  {
    "id": "e35eadd5-8628-4e36-a520-fed9dfbd7e44",
    "name": "Natalia Ward",
    "username": "Reina.Leannon",
    "email": "Antonietta65@hotmail.com",
    "address": {
      "street": "Amir Land",
      "suite": 25539,
      "city": "Ferrymouth",
      "zipcode": "84408",
      "geo": {
        "lat": "-13.4872",
        "lng": "118.3148"
      }
    },
    "phone": "922-502-8173 x1202",
    "website": "danika.biz",
    "company": {
      "name": "Bednar - Bogan",
      "catchPhrase": "Mandatory well-modulated extranet",
      "bs": "strategic target architectures"
    }
  },
  {
    "id": "9d1a856b-e6e3-434c-8660-491dfb741f76",
    "name": "Vilma Lind",
    "username": "Fermin_Hintz47",
    "email": "Florian.Mertz@gmail.com",
    "address": {
      "street": "Raquel Square",
      "suite": 75027,
      "city": "Willfurt",
      "zipcode": "47229-0125",
      "geo": {
        "lat": "56.3333",
        "lng": "-172.0942"
      }
    },
    "phone": "974.858.4944",
    "website": "cali.name",
    "company": {
      "name": "Lang, Gerlach and Collier",
      "catchPhrase": "Universal background solution",
      "bs": "back-end monetize markets"
    }
  },
  {
    "id": "17ad4594-1978-40ae-a157-46ab66679877",
    "name": "Dan Wiza",
    "username": "Darwin.Botsford40",
    "email": "Patsy_Larson@hotmail.com",
    "address": {
      "street": "Kling Shoals",
      "suite": 8284,
      "city": "Mattiemouth",
      "zipcode": "28943",
      "geo": {
        "lat": "65.5468",
        "lng": "-129.0327"
      }
    },
    "phone": "1-093-199-5164",
    "website": "raoul.info",
    "company": {
      "name": "Boyer - Macejkovic",
      "catchPhrase": "Synchronised local moratorium",
      "bs": "cross-platform transform content"
    }
  },
  {
    "id": "973e3383-c604-49d2-813c-ab3c2ec33514",
    "name": "Mozelle Kovacek",
    "username": "Gunnar23",
    "email": "Arturo.Reichel96@yahoo.com",
    "address": {
      "street": "Helen Extension",
      "suite": 31287,
      "city": "South Darrell",
      "zipcode": "30439",
      "geo": {
        "lat": "34.9777",
        "lng": "-144.7311"
      }
    },
    "phone": "757.127.4322",
    "website": "jerome.net",
    "company": {
      "name": "Lang Inc",
      "catchPhrase": "Enhanced 5th generation moderator",
      "bs": "synergistic matrix interfaces"
    }
  },
  {
    "id": "fae296b3-8269-42dd-a70a-637880044d88",
    "name": "Nola Klocko",
    "username": "Norwood.Heathcote2",
    "email": "Hayden.Borer@hotmail.com",
    "address": {
      "street": "Hagenes Mountains",
      "suite": 34333,
      "city": "New Raegan",
      "zipcode": "99437",
      "geo": {
        "lat": "-67.7395",
        "lng": "-166.1362"
      }
    },
    "phone": "1-807-098-1343 x2838",
    "website": "maudie.biz",
    "company": {
      "name": "Rutherford - Huels",
      "catchPhrase": "Profit-focused contextually-based moderator",
      "bs": "revolutionary strategize action-items"
    }
  },
  {
    "id": "ec0fb6fc-756d-41c6-bfac-96e792538bba",
    "name": "Kristy Funk",
    "username": "Talia_Frami",
    "email": "Amina29@hotmail.com",
    "address": {
      "street": "Emerald Manors",
      "suite": 16153,
      "city": "Deionside",
      "zipcode": "32629",
      "geo": {
        "lat": "23.6181",
        "lng": "-140.5927"
      }
    },
    "phone": "122.550.4125 x1324",
    "website": "connie.info",
    "company": {
      "name": "Schroeder - Braun",
      "catchPhrase": "Reverse-engineered non-volatile attitude",
      "bs": "intuitive disintermediate niches"
    }
  },
  {
    "id": "ea247086-5043-4673-a8d4-2808fcef4c23",
    "name": "Carolyne Kunde",
    "username": "Antonette.Simonis35",
    "email": "Ceasar.Brekke@gmail.com",
    "address": {
      "street": "Johnson Vista",
      "suite": 93552,
      "city": "Runolfsdottirville",
      "zipcode": "26026",
      "geo": {
        "lat": "6.1848",
        "lng": "80.3659"
      }
    },
    "phone": "(292) 315-8275 x00050",
    "website": "jody.biz",
    "company": {
      "name": "Sauer, Hagenes and Waters",
      "catchPhrase": "Implemented client-driven installation",
      "bs": "world-class strategize infrastructures"
    }
  },
  {
    "id": "eb94941f-1a7f-4778-92cb-a4e3038ae025",
    "name": "Holly Hills",
    "username": "Justus57",
    "email": "Della.Bartoletti@gmail.com",
    "address": {
      "street": "Rocky Stravenue",
      "suite": 14796,
      "city": "New Elliot",
      "zipcode": "07998",
      "geo": {
        "lat": "87.4460",
        "lng": "-38.1625"
      }
    },
    "phone": "844.923.1301 x01593",
    "website": "marlen.com",
    "company": {
      "name": "Macejkovic Inc",
      "catchPhrase": "Stand-alone transitional help-desk",
      "bs": "intuitive transition partnerships"
    }
  },
  {
    "id": "0e30b7e5-bb87-4efe-9b51-009bc68c6ea2",
    "name": "Emmanuel Lebsack",
    "username": "Alan_Boyle48",
    "email": "Delaney_Braun59@gmail.com",
    "address": {
      "street": "Carley Mission",
      "suite": 66781,
      "city": "Cronachester",
      "zipcode": "66953-8881",
      "geo": {
        "lat": "-38.1662",
        "lng": "51.7417"
      }
    },
    "phone": "847-798-2749 x90347",
    "website": "caterina.net",
    "company": {
      "name": "Hansen - Connelly",
      "catchPhrase": "Persistent mission-critical emulation",
      "bs": "web-enabled disintermediate schemas"
    }
  },
  {
    "id": "53ff78cf-a66e-4752-95cf-a9b3731d7531",
    "name": "Schuyler Hahn",
    "username": "Elaina.Ankunding",
    "email": "Billie_Torphy@hotmail.com",
    "address": {
      "street": "Jennifer Lodge",
      "suite": 30172,
      "city": "Veumberg",
      "zipcode": "41539-3068",
      "geo": {
        "lat": "29.2258",
        "lng": "-128.8894"
      }
    },
    "phone": "(296) 999-9792 x5267",
    "website": "tressa.org",
    "company": {
      "name": "Koch - Hamill",
      "catchPhrase": "Operative maximized extranet",
      "bs": "bricks-and-clicks transform partnerships"
    }
  },
  {
    "id": "3c57e541-54c6-4684-840d-7110000ea9bf",
    "name": "Yasmine Smith",
    "username": "Luna_Nader",
    "email": "Maybell88@hotmail.com",
    "address": {
      "street": "Cassin Branch",
      "suite": 50304,
      "city": "East Erica",
      "zipcode": "77267-3262",
      "geo": {
        "lat": "14.3085",
        "lng": "-32.7962"
      }
    },
    "phone": "1-596-955-9962",
    "website": "finn.biz",
    "company": {
      "name": "Kihn - Kling",
      "catchPhrase": "Enhanced responsive complexity",
      "bs": "robust envisioneer mindshare"
    }
  },
  {
    "id": "ac9aa3fd-ac28-4c53-a52b-45267548be9c",
    "name": "Creola Stiedemann",
    "username": "Destini86",
    "email": "Flavie83@gmail.com",
    "address": {
      "street": "Gay Roads",
      "suite": 72809,
      "city": "Port Jerrell",
      "zipcode": "73922-2195",
      "geo": {
        "lat": "27.6147",
        "lng": "-4.5413"
      }
    },
    "phone": "461-881-1591",
    "website": "karianne.info",
    "company": {
      "name": "Schultz Inc",
      "catchPhrase": "Optional encompassing capacity",
      "bs": "impactful architect applications"
    }
  },
  {
    "id": "e5b9b7d5-0f64-4ed5-b717-ab83ec96ffa8",
    "name": "Pearlie Fay",
    "username": "Viva.Morar",
    "email": "Gabriella_Abbott28@hotmail.com",
    "address": {
      "street": "Cartwright Well",
      "suite": 58002,
      "city": "Krajcikfort",
      "zipcode": "59180-1647",
      "geo": {
        "lat": "-6.7353",
        "lng": "-117.3411"
      }
    },
    "phone": "180.189.0768",
    "website": "willard.com",
    "company": {
      "name": "Jast, Torp and Daniel",
      "catchPhrase": "De-engineered high-level function",
      "bs": "collaborative generate partnerships"
    }
  },
  {
    "id": "5a8a3acc-887a-453c-8a07-9bd7f8ef3008",
    "name": "Antonio Wilderman",
    "username": "Ernestine40",
    "email": "Sarai.Botsford23@hotmail.com",
    "address": {
      "street": "Braun Ports",
      "suite": 42497,
      "city": "Marilieshire",
      "zipcode": "76718",
      "geo": {
        "lat": "-38.0152",
        "lng": "-21.9144"
      }
    },
    "phone": "362-399-2655 x3822",
    "website": "kathryne.net",
    "company": {
      "name": "Kautzer - Morar",
      "catchPhrase": "Assimilated asynchronous local area network",
      "bs": "holistic deploy models"
    }
  },
  {
    "id": "32c80c2a-c0cb-4b42-aae9-04136ba85424",
    "name": "Eliezer Schultz",
    "username": "Coby_Roberts",
    "email": "Bethel54@yahoo.com",
    "address": {
      "street": "Leannon Ports",
      "suite": 97013,
      "city": "Kerlukeside",
      "zipcode": "66890",
      "geo": {
        "lat": "55.6679",
        "lng": "149.6850"
      }
    },
    "phone": "329-168-5885 x930",
    "website": "burdette.net",
    "company": {
      "name": "McKenzie - Hilll",
      "catchPhrase": "Configurable responsive system engine",
      "bs": "revolutionary enhance schemas"
    }
  },
  {
    "id": "18255a01-3dd4-47ea-8ed5-9dedfaf80d70",
    "name": "Liam Ziemann",
    "username": "Wyman_Corkery",
    "email": "Cecilia.Kerluke@gmail.com",
    "address": {
      "street": "Heller Mall",
      "suite": 74046,
      "city": "Kilbackbury",
      "zipcode": "89865",
      "geo": {
        "lat": "55.9513",
        "lng": "13.6913"
      }
    },
    "phone": "(853) 850-7804 x566",
    "website": "daphney.net",
    "company": {
      "name": "Kiehn - Jaskolski",
      "catchPhrase": "Robust client-driven task-force",
      "bs": "world-class facilitate systems"
    }
  },
  {
    "id": "f9327ebb-810c-4e1c-b86b-f1940f1ef87c",
    "name": "Barney Sipes",
    "username": "Roman_Collier13",
    "email": "Rosanna64@yahoo.com",
    "address": {
      "street": "Bell Fort",
      "suite": 18944,
      "city": "Uptonborough",
      "zipcode": "37613-7453",
      "geo": {
        "lat": "37.8152",
        "lng": "56.5150"
      }
    },
    "phone": "110.485.1106",
    "website": "max.net",
    "company": {
      "name": "Sanford - Rempel",
      "catchPhrase": "Implemented eco-centric Graphic Interface",
      "bs": "revolutionary syndicate paradigms"
    }
  },
  {
    "id": "20500ac8-51f9-4082-82b8-121b0b520c75",
    "name": "Christelle Simonis",
    "username": "Camille70",
    "email": "Peyton_Walter76@gmail.com",
    "address": {
      "street": "Dasia Mill",
      "suite": 41024,
      "city": "Kamrenstad",
      "zipcode": "55310",
      "geo": {
        "lat": "-52.3922",
        "lng": "-52.1943"
      }
    },
    "phone": "557-918-8511",
    "website": "kaycee.name",
    "company": {
      "name": "Lebsack Inc",
      "catchPhrase": "Right-sized zero tolerance synergy",
      "bs": "bleeding-edge cultivate web-readiness"
    }
  },
  {
    "id": "22f16865-7ae5-4dde-b6de-56e408fa4460",
    "name": "Peter Wyman",
    "username": "Ibrahim.Rosenbaum97",
    "email": "Lavinia_Hahn@hotmail.com",
    "address": {
      "street": "Elwyn Vista",
      "suite": 36461,
      "city": "Port Hildegard",
      "zipcode": "38030-5572",
      "geo": {
        "lat": "-17.6220",
        "lng": "92.9208"
      }
    },
    "phone": "483-273-3512 x29800",
    "website": "alfonzo.biz",
    "company": {
      "name": "Grady - Wilderman",
      "catchPhrase": "De-engineered systematic groupware",
      "bs": "world-class e-enable e-business"
    }
  },
  {
    "id": "8515ff2a-7fba-471d-896f-df32b0ab7c6a",
    "name": "Darryl Flatley",
    "username": "Breanne.Reichel",
    "email": "Roxane_VonRueden@yahoo.com",
    "address": {
      "street": "Jerde Islands",
      "suite": 95049,
      "city": "New Nathan",
      "zipcode": "24596",
      "geo": {
        "lat": "-13.0494",
        "lng": "169.8796"
      }
    },
    "phone": "922.146.6788",
    "website": "osbaldo.info",
    "company": {
      "name": "Brakus Group",
      "catchPhrase": "Enterprise-wide stable encryption",
      "bs": "rich leverage partnerships"
    }
  },
  {
    "id": "7303281e-085c-471f-ad24-0087cd4fe2ae",
    "name": "Colin Bruen",
    "username": "Cyril_Pfeffer69",
    "email": "Vidal_Schultz@hotmail.com",
    "address": {
      "street": "Roy Plain",
      "suite": 11608,
      "city": "Port Marvinfurt",
      "zipcode": "42611-2808",
      "geo": {
        "lat": "-26.4941",
        "lng": "31.0346"
      }
    },
    "phone": "801.190.6019",
    "website": "dina.info",
    "company": {
      "name": "Prohaska - Robel",
      "catchPhrase": "Programmable analyzing model",
      "bs": "visionary synthesize interfaces"
    }
  },
  {
    "id": "bb0ff00d-1b39-48f5-98c7-5feb01703363",
    "name": "Enola Schumm",
    "username": "Ollie_Schumm67",
    "email": "Nathanial.Hilll19@yahoo.com",
    "address": {
      "street": "Eda View",
      "suite": 63120,
      "city": "Lake Gretchenport",
      "zipcode": "13728-0766",
      "geo": {
        "lat": "80.8628",
        "lng": "-22.0491"
      }
    },
    "phone": "(673) 815-1588 x385",
    "website": "emil.org",
    "company": {
      "name": "Anderson and Sons",
      "catchPhrase": "User-friendly didactic implementation",
      "bs": "user-centric e-enable web-readiness"
    }
  },
  {
    "id": "393ab64f-dc51-4462-84f9-b89f006d22f5",
    "name": "Rosendo Wilderman",
    "username": "Creola.Walsh",
    "email": "Sophia.Murazik18@hotmail.com",
    "address": {
      "street": "Berge Overpass",
      "suite": 65485,
      "city": "Rowlandshire",
      "zipcode": "81762",
      "geo": {
        "lat": "7.7661",
        "lng": "112.7307"
      }
    },
    "phone": "539-819-4180",
    "website": "myra.name",
    "company": {
      "name": "Abernathy - Prohaska",
      "catchPhrase": "Persevering secondary forecast",
      "bs": "end-to-end mesh portals"
    }
  },
  {
    "id": "c9187f67-1ee2-4da8-9e00-d2c602927e9e",
    "name": "Zachariah Rowe",
    "username": "Norberto25",
    "email": "Harry_Kshlerin@gmail.com",
    "address": {
      "street": "Simonis Green",
      "suite": 47288,
      "city": "North Tabithafurt",
      "zipcode": "50374",
      "geo": {
        "lat": "-3.7725",
        "lng": "80.4143"
      }
    },
    "phone": "500-461-5129",
    "website": "rickey.net",
    "company": {
      "name": "Quigley - Moen",
      "catchPhrase": "Innovative actuating access",
      "bs": "compelling integrate e-markets"
    }
  }
]
Selected values:
[
  {
    "id": "ab9ce834-80d6-41e1-9b37-8125afd5cc8f",
    "name": "Roxanne Dach",
    "username": "Frederik.Cruickshank60",
    "email": "Laverna.Schowalter64@yahoo.com",
    "address": {
      "street": "Barton Ranch",
      "suite": 50491,
      "city": "South Urban",
      "zipcode": "12533",
      "geo": {
        "lat": "-24.1109",
        "lng": "-157.3804"
      }
    },
    "phone": "(991) 805-3353 x06644",
    "website": "samson.biz",
    "company": {
      "name": "Nolan and Sons",
      "catchPhrase": "Object-based regional knowledge user",
      "bs": "B2C leverage networks"
    }
  }
]