Skip to content

Instantly share code, notes, and snippets.

var Article = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: {
article: PropTypes.object.isRequired
},
getStateFromStores() {
return {
author: UserStore.get(this.props.article.authorId);
@gaearon
gaearon / ClassNameMixin.js
Last active March 23, 2018 17:18
BEM in React
'use strict';
var React = require('react'),
classSet = require('react/lib/cx'),
_ = require('underscore');
var ClassNameMixin = {
propTypes: {
className: React.PropTypes.string,
context: React.PropTypes.string
/** @jsx React.DOM */
'use strict';
var React = require('react'),
escapeTextForBrowser = require('react/lib/escapeTextForBrowser'),
{ PropTypes } = React;
var UncontrolledContentEditable = React.createClass({
propTypes: {
component: PropTypes.func,
@gaearon
gaearon / createAsyncPage.jsx
Last active April 25, 2023 09:06
Webpack's async code splitting with React Router
'use strict';
var React = require('react');
function createAsyncHandler(getHandlerAsync, displayName) {
var Handler = null;
return React.createClass({
displayName: displayName,
@gaearon
gaearon / DocumentTitle.jsx
Last active August 29, 2015 14:07
Declarative document.title for React
// This is declarative document.title for React.
// No more updating document.title in lifecycle hooks and promise handlers!
//
// Usage:
//
// var SomePage = React.createClass({
// render() {
// // Title might depend on state but it's fine with DocumentTitle
// return (
// <DocumentTitle title={this.state.someData && this.state.someData.text}>
function makeIdentitySourceMap(map, source, resourcePath) {
source.split('\n').map(function (line, index) {
map.addMapping({
source: resourcePath,
original: {
line: index + 1,
column: 0
},
generated: {
line: index + 1,
@gaearon
gaearon / sroll_on_drag.js
Created October 24, 2014 16:47
Scroll on drag with react-dnd
configureDragDrop(registerType) {
var imageThreshold = Math.max(120, window.innerHeight / 4),
sectionThreshold = Math.max(140, window.innerHeight / 4),
currentDY = 0,
frame;
function makeScrollingHandler(threshold) {
function getScrollDY(clientY) {
var speed;
if (clientY < threshold) {
@gaearon
gaearon / AudioPlayer.jsx
Created October 31, 2014 22:13
React <audio> wrapper
/** @jsx React.DOM */
'use strict';
var React = require('react'),
{ PropTypes } = React;
var AudioPlayer = React.createClass({
propTypes: {
source: PropTypes.string.isRequired,
isPlaying: PropTypes.bool.isRequired,
@gaearon
gaearon / observeStore.js
Last active May 19, 2022 10:55
Wait for some condition to become true on a Flux store, useful for react-router async transition hooks
// Usage example:
//
// willTransitionTo(transition, params, query, callback) {
// observeStore(DraftStore, s => s.isLoaded()).then(() => {
// if (DraftStore.isMissingTitle()) {
// transition.redirect('composeDraft', params);
// }
// }).finally(callback);
// }
@gaearon
gaearon / Navigation.js
Created November 3, 2014 15:51
Navigation that can be used from Actions
/*
Usage:
var routes = React.renderComponent(
<Routes location='history'>...</Routes>,
document.body
);
Navigation.injectRoutesInstance(routes);