Components
Modal
This works like a simplified, React-native version of Bootstrap's modal.
var ButtonWithDialog = React.createClass({
mixins: [LayeredComponentMixin],
render: function() {
return <button onClick={this.handleClick}>
Click Me!
</button>;
},
renderLayer: function() {
if (this.state.clicked) {
return <Modal onClose={this.handleClose}>
<div className="modal-header">
Header
<a href="/?originalUrl=https%3A%2F%2Fkhan.github.io%2F%26%2334%3Bjavascript%3A%2520void%25200%3B%26%2334%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520style%3D%7B%7Bfloat%3A%2520%26%2334%3Bright%26%2334%3B%2C%2520textDecoration%3A%2520%26%2334%3Bnone%26%2334%3B%7D%7D%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520onClick%3D%7Bthis.handleClose%7D%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26amp%3B%23215%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520className%3D%26%2334%3Bmodal-body%26%2334%3B%26gt%3BBody!%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FModal%26gt%3B%3B%2520%2520%2520%2520%2520%2520%2520%2520%7D%2520else%2520%7B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520return%2520%26lt%3Bdiv%2520%2F%26gt%3B%3B%2520%2520%2520%2520%2520%2520%2520%2520%7D%2520%2520%2520%2520%7D%2C%2520%2520%2520%2520%2F%2F%2520%7B%7B%7B%2520%2520%2520%2520handleClose%3A%2520function()%2520%7B%2520%2520%2520%2520%2520%2520%2520%2520this.setState(%7B%2520clicked%3A%2520false%2520%7D)%3B%2520%2520%2520%2520%7D%2ChandleClick%3A%2520function()%2520%7Bthis.setState(%7B%2520clicked%3A%2520!this.state.clicked%2520%7D)%3B%7D%2CgetInitialState%3A%2520function()%2520%7Breturn%2520%7B%2520clicked%3A%2520false%2520%7D%3B%7D%2F%2F%2520%7D%7D%7D%7D)%3Breturn%2520%26lt%3BButtonWithDialog%2520%2F%26gt%3B%3B%253C%2Fdiv">
Button Group
A nice looking replacement for a related set of buttons (like radio buttons).
var Options = React.createClass({
render: function() {
var labelStyle = {
color: this.state.value,
padding: '0 10px'
};
return <div>
<ButtonGroup value={this.state.value}
buttons={[
{value: 'red', content: 'red'},
{value: 'green', content: 'green'},
{value: 'blue', content: 'blue'}
]}
onChange={this.handleChange} />
<span style={labelStyle}>Your useful text</span>
</div>;
},
getInitialState: function() {
return { value: 'red' };
},
handleChange: function(value) {
this.setState({ value });
}
});
return <Options />;
Multi Button Group
Like Button Group, but with multi-select (like checkboxes).
var Options = React.createClass({
render: function() {
// {{{
// Returns a small, colored div
var paint = function (color) {
var style = {
backgroundColor: color,
border: (color === 'white') ? '1px solid' : null,
height: 15,
width: 15,
display: 'inline-block'
};
return <div style={style} />;
};
var outerStyle = {
padding: '0 10px',
display: 'inline-block'
};
// }}}
return <div>
Mixing Colors:
<div style={outerStyle}>
<MultiButtonGroup values={this.state.values}
buttons={[
{value: 'red', content: paint('red')},
{value: 'green', content: paint('green')},
{value: 'blue', content: paint('blue')}
]}
onChange={this.handleChange} />
</div>
{paint(this.mixColors(this.state.values))}
</div>;
},
getInitialState: function() {
return { values: ['red', 'blue'] };
},
// {{{
mixColors: function(colors) {
var containsRed = colors.indexOf('red') > -1;
var containsBlue = colors.indexOf('blue') > -1;
var containsGreen = colors.indexOf('green') > -1;
if (containsRed && containsGreen && containsBlue) {
return 'white';
} else if (containsRed && containsGreen) {
return 'yellow';
} else if (containsRed && containsBlue) {
return 'purple';
} else if (containsGreen && containsBlue) {
return 'cyan';
} else if (colors.length > 0) {
return colors[0];
}
return 'black';
},
// }}}
handleChange: function(values) {
this.setState({ values });
}
});
return <Options />;
$_
A pseudo-component useful for internationalization.
var translated = <$_ first="Motoko" last="Kusanagi">
Hello, %(first)s %(last)s!
</$_>;
var link = <a href="/?originalUrl=https%3A%2F%2Fkhan.github.io%2F%26%2334%3Bjavascript%3Avoid%25200%3B%26%2334%3B%2520onClick%3D%7Bthis._markTooHard%7D%26gt%3B%2520%2520%2520%2520%26lt%3B%24_%26gt%3BClick%2520here%26lt%3B%2F%24_%26gt%3B%26lt%3B%2Fa%26gt%3B%3Breturn%2520%26lt%3Bspan%26gt%3B%2520%2520%2520%2520%26lt%3B%24_%2520clickHere%3D%7Blink%7D%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520We%2520noticed%2520you%2520had%2520a%2520little%2520trouble%2520with%2520this%2520task.%2520%2520%2520%2520%2520%2520%2520%2520%25(clickHere)s%2520to%2520hide%2520it%2520until%2520later.%2520%2520%2520%2520%26lt%3B%2F%24_%26gt%3B%26lt%3B%2Fspan%26gt%3B%3B%253C%2Fdiv">
Layered Component Mixin
Render another component in a div appended to the page.
var ButtonWithDialog = React.createClass({
mixins: [LayeredComponentMixin],
render: function() {
return <button onClick={this.handleClick}>
Click Me!
</button>;
},
renderLayer: function() {
if (this.state.clicked) {
return <Modal onClose={this.handleClose}>
<div className="modal-header">
Header
<a href="/?originalUrl=https%3A%2F%2Fkhan.github.io%2F%26%2334%3Bjavascript%3A%2520void%25200%3B%26%2334%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520style%3D%7B%7Bfloat%3A%2520%26%2334%3Bright%26%2334%3B%2C%2520textDecoration%3A%2520%26%2334%3Bnone%26%2334%3B%7D%7D%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520onClick%3D%7Bthis.handleClose%7D%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26amp%3B%23215%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520className%3D%26%2334%3Bmodal-body%26%2334%3B%26gt%3BBody!%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FModal%26gt%3B%3B%2520%2520%2520%2520%2520%2520%2520%2520%7D%2520else%2520%7B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520return%2520%26lt%3Bdiv%2520%2F%26gt%3B%3B%2520%2520%2520%2520%2520%2520%2520%2520%7D%2520%2520%2520%2520%7D%2C%2520%2520%2520%2520%2F%2F%2520%7B%7B%7B%2520%2520%2520%2520handleClose%3A%2520function()%2520%7B%2520%2520%2520%2520%2520%2520%2520%2520this.setState(%7B%2520clicked%3A%2520false%2520%7D)%3B%2520%2520%2520%2520%7D%2ChandleClick%3A%2520function()%2520%7Bthis.setState(%7B%2520clicked%3A%2520!this.state.clicked%2520%7D)%3B%7D%2CgetInitialState%3A%2520function()%2520%7Breturn%2520%7B%2520clicked%3A%2520false%2520%7D%3B%7D%2F%2F%2520%7D%7D%7D%7D)%3Breturn%2520%26lt%3BButtonWithDialog%2520%2F%26gt%3B%3B%253C%2Fdiv">
Set Interval Mixin
Like setInterval that calls clearInterval for you.
var RefreshingComponent = React.createClass({
mixins: [SetIntervalMixin],
componentDidMount: function() {
this.setInterval(this.updateState, 1000);
},
render: function() {
return <div>{this.state.time} seconds</div>;
},
// {{{
getInitialState: function() {
return { time: 0 };
},
updateState: function() {
var time = this.state.time + 1;
this.setState({ time });
}
// }}}
});
return <RefreshingComponent />;
State-from-Store Mixin
Wires change listeners to get updates from a flux store.
return <div>
example needed!
</div>;
TimeAgo
Human friendly display of how long it's been since an event happened.
// {{{
var FormatCommentBody = React.createClass({
render: function() {
return <div>
{this.props.body}
</div>;
}
});
var UserBadge = React.createClass({
render: function() {
return <div>@{this.props.user}</div>;
}
});
// }}}
var Comment = React.createClass({
render: function() {
return <div>
<FormatCommentBody body={this.props.body} />
<div>
<UserBadge user={this.props.user} /> -
<TimeAgo time={this.props.date} />
</div>
</div>;
}
});
return <Comment body="such time" user="dinojoel" date={new Date()} />;
Blur Input
An input component that notifies its parent of changes when it loses focus.
// {{{ TODO(joel) - numericalParse
var URLInput = React.createClass({
render: function() {
// {{{
var imgStyle = {
paddingTop: 15,
display: 'block',
margin: 'auto',
maxWidth: '100%'
};
// }}}
return <div>
Image URL: <BlurInput value={this.state.url}
onChange={this.handleChange} />
<img style={imgStyle} src="/?originalUrl=https%3A%2F%2Fkhan.github.io%2F%257Bthis.state.url%257D%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%3B%2520%2520%2520%2520%257D%2C%2520%2520%2520%2520handleChange%3A%2520function(url)%2520%257B%2520%2520%2520%2520%2520%2520%2520%2520this.setState(%257B%2520url%2520%257D)%3B%2520%2520%2520%2520%257D%2C%2520%2520%2520%2520getInitialState%3A%2520function()%2520%257B%2520%2520%2520%2520%2520%2520%2520%2520return%2520%257B%2520url%3A%2520this.props.initialUrl%2520%257D%3B%2520%2520%2520%2520%257D%257D)%3Breturn%2520%26lt%3BURLInput%2520initialUrl%3D%257B%26%2334%3Bhttps%3A%2F%2Fwww.kastatic.org%2Fimages%2Fkhan-logo-vertical-transparent.png%26%2334%3B%7D%2520%2F%26gt%3B%3B%253C%2Fdiv">
TeX
Easily render LaTeX using MathJax or Khan Academy's fast KaTeX library.
// return <TeX>{"\\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} = \\frac{4\\pi}{c}\\vec{\\mathbf{j}}"}</TeX>
return <TeX>\nabla \cdot E = 4 \pi \rho</TeX>;
Tooltip
A better tooltip.
// {{{
var pStyle = {
margin: 0,
padding: 10,
backgroundColor: "white"
};
// }}}
return <Tooltip className="class-for-tooltip-contents"
horizontalPosition="left"
horizontalAlign="left"
verticalPosition="bottom"
arrowSize={10}
borderColor="#ccc"
show>
<div>reticulating splines!</div>
<p style={pStyle}>
<a href="/?originalUrl=https%3A%2F%2Fkhan.github.io%2F%26%2334%3Bhttp%3A%2F%2Fsims.wikia.com%2Fwiki%2FReticulating_splines%26%2334%3B%26gt%3Bmeaningless%2520phrase%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fp%26gt%3B%26lt%3B%2FTooltip%26gt%3B%3B%253C%2Fdiv">
Info-Tip
A very simple informational tooltip that displays on hover.
return <div>
reticulating splines
<InfoTip><p>
<a href="/?originalUrl=https%3A%2F%2Fkhan.github.io%2F%26%2334%3Bhttp%3A%2F%2Fsims.wikia.com%2Fwiki%2FReticulating_splines%26%2334%3B%26gt%3Bmeaningless%2520phrase%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fp%26gt%3B%26lt%3B%2FInfoTip%26gt%3B%26lt%3B%2Fdiv%26gt%3B%3B%253C%2Fdiv">
Sortable
Sort a list.
var Sorter = React.createClass({
render: function() {
return <Sortable components={this.state.components}
onReorder={this.handleReorder}
className="sidebar-list"
verify={() => true} />;
},
// {{{
handleReorder: function(components) {
this.setState({ components });
},
getInitialState: function() {
return { components: this.props.components };
}
// }}}
});
// {{{
var components = [
<div draggable={true} key="1">1</div>,
<div draggable={true} key="2">2</div>,
<div draggable={true} key="3">3</div>,
<div draggable={true} key="4">4</div>
];
return <Sorter components={components} />;
// }}}
Drag Target
Accept dragged content from the browser or the desktop.
var Target = React.createClass({
render: function() {
return <DragTarget onDrop={this.handleDrop}>
{this.state.message}
</DragTarget>;
},
handleDrop: function(event) {
this.setState({ message: "delicious. thank you!" });
},
getInitialState: function() {
return { message: "I haven't received any drags" };
}
});
return <Target />;
Window Drag
Detect drags into and out of the page.
var Indicator = React.createClass({
render: function() {
return <WindowDrag>
{/* modal? */}
<div>WINDOW DRAG!</div>
</WindowDrag>;
}
});
return <Indicator />;
Timeout Transition Group
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.
// {{{
var itemStyle = {
padding: 10,
borderColor: "black",
borderWidth: 1,
borderStyle: "solid",
overflow: "hidden",
cursor: "pointer"
};
// }}}
/**
* Already in the stylesheet of the page:
*
* .demo-enter {
* opacity: 0.01;
* height: 0px;
* padding: 0px 10px !important;
* transition: opacity 500ms ease-out,
* padding 500ms ease-out,
* height 500ms ease-out;
* }
* .demo-enter.demo-enter-active {
* opacity: 1;
* height: 16px;
* padding: 10px !important;
* }
* .demo-leave {
* opacity: 1;
* height: 16px;
* transition: opacity 500ms ease-out,
* padding 500ms ease-out,
* height 500ms ease-out;
* }
* .demo-leave.demo-leave-active {
* opacity: 0;
* height: 0px;
* padding: 0px 10px !important;
* }
*/
var List = React.createClass({
getInitialState: function() {
return {
items: [0, 1, 2, 3]
};
},
removeThenReadd: function(item) {
// {{{
var items = this.state.items.slice(0);
var found = false;
for(var i = 0; i < items.length; i++) {
if (items[i] === item) {
items.splice(i, 1);
found = true;
break;
}
}
this.setState({items: items}, function() {
if (found) {
setTimeout(function() {
var items = this.state.items.slice(0);
items.push(item);
this.setState({items: items});
}.bind(this), 5000);
}
}.bind(this));
// }}}
},
_makeDiv: function(index) {
// {{{
return <div onClick={this.removeThenReadd.bind(null, index)}
style={itemStyle}
key={index}>
{"Item " + index}
</div>;
// }}}
},
render: function() {
var items = this.state.items.map(this._makeDiv);
return <TimeoutTransitionGroup enterTimeout={500}
leaveTimeout={500}
transitionName="demo">
{items}
</TimeoutTransitionGroup>;
}
});
return <List />;
Backbone Mixin
Update this view every time a backbone model updates:
This mixin is deprecated. We do not recommend using it in production.
var SimpleModel = Backbone.Model.extend({
defaults: {
comment: "This is a comment!"
}
});
var Comment = React.createClass({
mixins: [BackboneMixin],
getBackboneModels: function() {
return [this.props.model];
},
render: function() {
return <div>{this.props.model.get("comment")}</div>;
}
});
var myModel = new SimpleModel();
return <div>
<Comment model={myModel} />
<button onClick={function() {myModel.set("comment", "This is an (edited) comment!");}}>
Edit
</button>
</div>;