{# based on http://nodejs.org/api/documentation.html#documentation_stability_index #} {% macro stability(status) -%}
Stability{{ status }}
{%- endmacro %} {% macro depends(packages) -%}
Depends{% for package in packages %}{{ package[1] }}{% else %}None{% endfor %}
{%- endmacro %} React Components

React Components

reusable components by Khan Academy

Introduction

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.

Important files and info:

Getting Started

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.

External Requirements

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.

Component Stability

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.

Components

{{ stability("experimental") }} {{ depends([]) }}

This works like a simplified, React-native version of Bootstrap's modal.

{% code_example "modal.jsx" %}

Button Group

{{ stability("unstable") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

A nice looking replacement for a related set of buttons (like radio buttons).

{% code_example "button-group.jsx" %}

Multi Button Group

{{ stability("unstable") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

Like Button Group, but with multi-select (like checkboxes).

{% code_example "multi-button-group.jsx" %}

$_

{{ stability("unstable") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

A pseudo-component useful for internationalization.

{% code_example "i18n.jsx" %}

Layered Component Mixin

{{ stability("unstable") }} {{ depends([]) }}

Render another component in a div appended to the page.

{% code_example "layered-component-mixin.jsx" %}

Set Interval Mixin

{{ stability("unstable") }} {{ depends([]) }}

Like setInterval that calls clearInterval for you.

{% code_example "set-interval-mixin.jsx" %}

State-from-Store Mixin

{{ stability("unstable") }} {{ depends([("https://facebook.github.io/flux/", "Flux"), ("http://underscorejs.org/", "Underscore")]) }}

Wires change listeners to get updates from a flux store.

{% code_example "state-from-store-mixin.jsx" %}

TimeAgo

{{ stability("unstable") }} {{ depends([("http://momentjs.com/", "moment")]) }}

Human friendly display of how long it's been since an event happened.

{% code_example "timeago.jsx" %}

Blur Input

{{ stability("unstable") }} {{ depends([]) }}

An input component that notifies its parent of changes when it loses focus.

{% code_example "blur-input.jsx" %}

TeX

{{ stability("unstable") }} {{ depends([("https://github.com/Khan/KaTeX", "KaTeX"), ("http://mathjax.com/", "MathJax")]) }}

Easily render LaTeX using MathJax or Khan Academy's fast KaTeX library.

{% code_example "tex.jsx" %}

Tooltip

{{ stability("unstable") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

A better tooltip.

{% code_example "tooltip.jsx" %}

Info-Tip

{{ stability("unstable") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

A very simple informational tooltip that displays on hover.

{% code_example "info-tip.jsx" %}

Sortable

{{ stability("unstable") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

Sort a list.

{% code_example "sortable.jsx" %}

Drag Target

{{ stability("unstable") }} {{ depends([]) }}

Accept dragged content from the browser or the desktop.

{% code_example "drag-target.jsx" %}

Window Drag

{{ stability("experimental") }} {{ depends([("http://underscorejs.org/", "Underscore")]) }}

Detect drags into and out of the page.

{% code_example "window-drag.jsx" %}

Timeout Transition Group

{{ stability("unstable") }} {{ depends([("http://jquery.com/", "jQuery")]) }}

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.

{% code_example "timeout-transition-group.jsx" %}

Backbone Mixin

{{ stability("deprecated") }} {{ depends([("http://backbonejs.org/", "Backbone.js")]) }}

Update this view every time a backbone model updates:

You should know that I highly recommend not using this mixin. It inevitably leads to inefficient code and janky UX. Not at first - only gradually. You won't really notice until it's too late and BackboneMixin runs the interface you just spent three months on.

Anyway, you're your own person - do what you think is right.

{% code_example "backbone-mixin.jsx" %}