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:

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" %}

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" %}

Drag Target

Accept dragged content from the browser or the desktop.

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