Skip to content
Selection dropdown component using Facebook React.
Branch: master
Clone or download
Latest commit 1dbe3d6 Dec 21, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples 0.3.4 Dec 21, 2015
src
test Changed api-search-items to item-checker and words-checker to word-co… Dec 14, 2015
.babelrc
.editorconfig Added .editorconfig http://editorconfig.org/ Nov 25, 2015
.eslintignore
.eslintrc
.gitignore
.stylelintrc
.travis.yml
LICENSE.md Added license MIT http://choosealicense.com/licenses/mit/ Nov 24, 2015
README.md 0.3.3 Dec 21, 2015
package.json
webpack.config.base.js Added autoprefixer Dec 16, 2015
webpack.config.development.js Added stylesheets: added postcss and updated webpack and npm scripts Dec 15, 2015
webpack.config.production.js Added stylesheets: added postcss and updated webpack and npm scripts Dec 15, 2015

README.md

React UI Dropdown

Now the component is already can be used, but I'm still working on it, and on examples and documentation. If you have any question, please, create issue.

Build Status

Demo

View demo

Install

$ npm install react-ui-dropdown

Example

Simple example

import React from "react";
import ReactDOM from "react-dom";
import ReactUIDropdown from "react-ui-dropdown";

const data = [
  {
    id: 100,
    title: "Centaur",
    image: "https://d30y9cdsu7xlg0.cloudfront.net/png/120146-200.png"
  },
  ...
];

const handleDropdownChange = (selectedItems) => {
  console.log(selectedItems);
};

ReactDOM.render(
  <div>
    <ReactUIDropdown
      label="Myth animals"
      initialItems={data}
      onChange={handleDropdownChange}/>
  </div>,
  document.getElementById("root")
);

Options

initialItems - (reqired) array of object like with follow fields:

{
  id: 2,
  title: "My title",
  subtitle: "My subtitle",
  image: FULL_LINK_TO_IMAGE
}

Subtitle and image are optional.

remoteSearch - tool for remote search, object with follow fields:

{url: "/some-url", fields: "some_field"}

fields can be string or array.

maxDisplayedItems - max items, which show in dropdown. Default 10.

label - (required) text for label.

placeholder - text for input placeholder

showImages - show or not images in dropdown. Default true.

multiple - choose few items or just one. Default true.

onChange - function, which handle changing list of selected items.

License

MIT

You can’t perform that action at this time.