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 by adapting or recreating the most useful plugins.

Important files and info:

Components

Backbone Mixin

Update this view every time a backbone model updates:

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

Button Group

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

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

$_

A pseudo-component useful for internationalization.

{% code_example "i18n.jsx" %}

Layered Component Mixin

Render another component in a div appended to the page

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

Set Interval Mixin

Like setInterval that calls clearInterval for you.

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

TimeAgo

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

{% code_example "timeago.jsx" %}

Blur Input

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

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

TeX

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

{% code_example "tex.jsx" %}

Tooltip

A better tooltip.

{% code_example "tooltip.jsx" %}

Info Tip

A very simple tooltip.

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

Sortable

Sort a list

{% code_example "sortable.jsx" %}