A collection of reusable React components with their own Flux lifecycle.
Try our Yeoman generator for testing, linting, watchers, and more!
generator-reactjs-flux for Facebook's React framework and Flux application architecture.
From a simple table to multi-column filtering, column sorting, row selection, client side pagination, and more.
Search against large sets of data, populate results, and take action with all the sweet hot keys your power users are after.
Display complex data with our pie chart's drill in/out functionality, hover animations, and result list.
A simple single page modal that renders in it's own DOM tree and operates outside the render cycles of an application.
A page level component that displays a confirmation dialog to the user with OK/Cancel buttons.
A page level component that animates in and out for success, error, warning, info, and custom messages.
$ npm install -g bower
$ bower install react-components --save
$ npm install dataminr-react-components --save
RequestHandler: 'path/to/RequestHandler',
drc: 'path/to/bower_components/react-components/src/compiled'
This step is only necessary if you have your own Flux Dispatcher. Otherwise you can just use the built-in one in this library.
map: {
"*":{
"drc/dispatcher/AppDispatcher.min": "path/to/your/dispatcher"
}
}
<link type="text/css" rel="stylesheet" href="/bower_components/react-components/dist/react-components.css" />
If you are submitting a bug, please create a jsfiddle demonstrating the issue if possible.
$ git clone https://github.com/dataminr/react-components.git
$ git checkout master
- Pull requests should be made to the
master
branch with proper unit tests. - Do not include the minified files in your pull request. We build these when we tag a release.
- React JavaScript library for building user interfaces
- Flux Application architecture for building user interfaces
- Require JavaScript file and module loader optimized for in-browser use
- lodash JavaScript utility library
- Moment Parse, validate, manipulate, and display dates in JavaScript
- jQuery Fast, small, and feature-rich JavaScript library
- d3 Manipulate documents based on data with Data-Driven Documents
- Jasmine Behavior-driven development framework for testing JavaScript code
- Istanbul JavaScript statement, line, function, and branch code coverage when running unit tests
- ESLint The pluggable linting utility for JavaScript and JSX
$ npm install -g bower
$ gem install compass
$ npm install -g grunt-cli
$ npm install -g react-tools
$ cd ~/path/to/react-components/root
$ npm install
$ grunt init
$ cd ~/path/to/react-components/root
$ bower link
$ cd ~/path/to/project/root
$ bower link react-components
NPM Troubles? npm ERR! Are you seeing something like: Error: EACCES, mkdir '/Users/user/.npm/dargs/2.1.0'
?
Try the following commands and try the previous step again:
$ cd ~
$ sudo chown -R $(whoami) .npm
If you find your css build results are empty, update your sass gem.
/react-components/src/js/examples/index.html
The default grunt task will compile jsx and scss files as well as start a watcher for them.
$ grunt
Same as the default grunt task, however it will reinstall dependencies.
$ grunt init
Run Jasmine unit tests, JSHint, and JSCS
$ grunt test
Same as grunt test, however, this task will run code coverage and launch the code coverage in your browser.
$ grunt test:cov
Run unit tests in the browser on actual source rather than instrumented files from istanbul.
$ grunt jasmineDebug --filter {/folder|file}
Run unit tests for a filtered set of folders or files without code coverage thresholds.
$ grunt jasmineFilter --filter {/folder|file}
MIT
The developers that made this project possible by contributing to the the following libraries and frameworks:
React, Flux, Compass, Sass, Require, Grunt, Jasmine, Istanbul, ESLint, Watch, d3, lodash, jQuery, and Moment