Skip to content

Instantly share code, notes, and snippets.

Avatar

Dan Abramov gaearon

View GitHub Profile
@gaearon
gaearon / feedback_widget.js
Last active Aug 29, 2015
Sample React widgets for SO question
View feedback_widget.js
/** @jsx React.DOM */
/* jshint trailing:false, quotmark:false, newcap:false */
define(function (require) {
'use strict';
var React = require('react'),
Promise = require('bluebird'),
$ = require('jquery');
View validation_mixin.js
define(function () {
'use strict';
var _ = require('underscore');
var ValidationMixin = {
getInitialState: function () {
return {
errors: []
View form_mixin.js
define(function () {
'use strict';
var _ = require('underscore');
var EDITABLE_STATE = 'editable',
SUBMITTING_STATE = 'submitting',
SUBMITTED_STATE = 'submitted';
View popover.js
var Popover = React.createClass({
mixins: [ClassNameMixin],
className: 'Popover',
propTypes: {
anchorOffset: React.PropTypes.oneOf(['normal', 'fromRoundBtn', 'fromSmallRoundBtn']),
expandFrom: React.PropTypes.shape({
horizontal: React.PropTypes.oneOf(['left', 'center', 'right']).isRequired,
@gaearon
gaearon / stores_and_pagination.js
Last active Aug 29, 2015
Removing duplication from similar paginating Flux Stores
View stores_and_pagination.js
// Assumes you're using normalizr https://github.com/gaearon/normalizr
// ---------------
// Helpers:
// ---------------
// StoreUtils
'use strict';
View smartasscomponents.js
var Article = React.createClass({
mixins: [createStoreMixin(ArticleStore)],
propTypes: {
articleId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
article: ArticleStore.get(this.props.articleId);
View dumbcomponents.js
var Article = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: {
article: PropTypes.object.isRequired
},
getStateFromStores() {
return {
author: UserStore.get(this.props.article.authorId);
@gaearon
gaearon / DocumentTitle.jsx
Last active Aug 29, 2015
Declarative document.title for React
View DocumentTitle.jsx
// 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}>
View makeIdentitySourceMap.js
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 / Navigation.js
Created Nov 3, 2014
Navigation that can be used from Actions
View Navigation.js
/*
Usage:
var routes = React.renderComponent(
<Routes location='history'>...</Routes>,
document.body
);
Navigation.injectRoutesInstance(routes);
You can’t perform that action at this time.