This is a collection of some of the most reusable React components built at Khan Academy. In the jQuery ecosystem there's a large collection of plugins that can be used for anything from modals to translation. We're trying to make it just as easy to jumpstart React applications with a well-tested, thoughtful, and beautiful library of components.
Most of our components are bespoke, so if you're already invested in a UI framework like Bootstrap, Topcoat, or KendoUI, you should check to see if there's an existing React wrapper for your framework.
React Components uses CommonJS-style requires, making them easy to include in a project using Browserify or Webpack.
Use as a Git Submodule (Recommended)
In the author's limited experience, it's easiest to clone React Components as a subrepo (assuming Git).
Then simply use CommonJS requires pointing to the components within the subrepo.
Some components require external libraries - TimeAgo, TeX, BackboneMixin, etc. The libraries aren't included with React Components (to keep it lightweight), so you'll need to provide them as necessary. External requirements need to be available as CommonJS imports, which usually means adding them to your package.json. For example, TimeAgo uses moment:
Now we can use TimeAgo just like any of the other components.
We borrow Mozilla's SDK stability index (which is in turn borrowed from Node) to indicate how much you can rely on each component.
Stability: 0 - Deprecated
This component is known to be problematic, and changes are planned.
Do not rely on it. Use of the feature may cause warnings. Backwards
compatibility should not be expected.
Stability: 1 - Experimental
This component was introduced recently, and may change or be removed in
future versions. Please try it out and provide feedback. If it addresses
a use-case that is important to you, tell the react-components team.
Stability: 2 - Unstable
The component is in the process of settling, but has not yet had
sufficient real-world testing to be considered stable. Backwards-
compatibility will be maintained if reasonable.
Stability: 3 - Stable
The component is a fully supported part of react-components. We will
avoid breaking backwards compatibility unless absolutely necessary.
A pseudo-component useful for internationalization.
var translated = <$_ first="Motoko" last="Kusanagi">
Hello, %(first)s %(last)s!
We noticed you had a little trouble with this task.
%(clickHere)s to hide it until later.
A wrapper which applies CSS classes to children who are entering or leaving. It is very much like the CSSTransitionGroup provided in the React addons. Unfortunately, CSSTransitionGroup uses the transitionEnd event, which is not fired in a variety of conditions (including the transition not being visible or in another tab). This version of CSSTransitionGroup uses a manually set timeout, instead.