Luca Colonnello LucaColonnello

Custom CSSTransitionGroup for React

The CSSTransitionGroup in the React Addons works fine for simple things, but since React components don’t have much knowledge of their children, more complex nested components can be re-rendering while the transitions are happening. This can lead to jerky animation.

This example implements a custom AnimationItem component that sits inside the TransitionGroup — note the lack of the CSS prefix there — which has an API for handling the various transition events. I’ve reimplemented the behaviour from the CSSTransitionsGroup in the AnimationItem component but using requestAnimationFrame to wait a render tick before triggering the transition, and Arrival to determine when the transition ends.

Again, it’s unnecessary in this example because the components are so simple, but it makes a massive difference on more complex components.

Forked from Max's Pen [Cus

OS X 10.11 (El Capitan) / Node.js and io.js Developer Environment

Custom recipe to get OS X 10.11 El Capitan running from scratch with useful applications and Node.js Developer environment. I use this gist to keep track of the important software and steps required to have a functioning system after fresh install.

#List of countries

It's time someone compiled a list of countries to use within a web application. This gist attempts to make a first move at that.

List of nationalities

I've also compiled a list of nationalities

List of nationalities

It's time someone compiled a list of nationalities to use within a web application. This gist attempts to make a first move at that.

##List of countries

I've also compiled a list of countries

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="React Menu Content Example">
	<script src="http://fb.me/react-with-addons-0.13.1.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	html,
	body {

	// Cross browser, backward compatible solution
	(function( window, Date ) {
	// feature testing
	var raf = window.mozRequestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	window.oRequestAnimationFrame;

	window.animLoop = function( render, element ) {
	var running, lastFrame = +new Date;

	// it could be part of the LoopBackSDK module

	// evaluate usage of node http module for ajax call
	var http = require( 'http' );

	// LoopBack HTTP Interface
	// Class that has the responsibility to call
	// the LoopBack Application, must be instantiated for each models

	function HTTPInterface(

	// require() some stuff from npm (like you were using browserify)
	// and then hit Run Code to run it on the right

	var patchHTML = require('html2idom').patchHTML;

	function cond( cond, resTrue, resFalse ) {
	if(cond){
	return resTrue;
	} else {
	return resFalse;

	import React from 'react/addons';
	const TestUtils = React.addons.TestUtils;

	export default createComponent;

	function createComponent(component, props, ...children) {
	const shallowRenderer = TestUtils.createRenderer();
	shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
	return shallowRenderer.getRenderOutput();
	}

	// components/App-test.jsx
	import "../utils/test/dom";
	import assert from 'assert';

	import React from 'react/addons';
	import App from '../App';


	const TestUtils = React.addons.TestUtils;