Skip to content

Instantly share code, notes, and snippets.

View JoeTheDave's full-sized avatar

Joe Davis JoeTheDave

  • Grayshift
  • Shawnee, KS
View GitHub Profile
import React from 'react';
import {findDOMNode} from 'React-dom';
class ExampleComponent extends React.Component{
constructor (props) {
super(props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.visible !== this.props.visible) {
import React from 'react';
const ExampleComponent = ({show}) => {
const componentClasses = ['example-component'];
if (show) { componentClasses.push('show'); }
return (
<div className={componentClasses.join(' ')}></div>
);
};
.example-component {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
opacity: 0;
visibility: hidden;
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
const Example = ({items, removeItemHandler}) => {
return (
<div>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={700} transitionLeaveTimeout={700}>
{items.map(function(item) {
return (
<div key={item.id} className="todo-item" onClick={removeItemHandler.bind(null, item)}>
.todo-item {
width: 100px;
height: 100px;
background-color: red;
float: left;
border: solid 2px white;
box-sizing: border-box;
}
.example-enter {
.box {
background-color: yellow;
border: solid 1px black;
height: 100px;
width: 100px;
opacity: 1.0;
box-sizing: border-box;
transition: height 500ms 0ms, opacity 500ms 500ms;
}
'use strict';
const appUserRepository = require('../data/repositories/appUserRepository');
const saveAppUser = (profile) => {
return new Promise((resolve, reject) => {
Promise.resolve().then(() => {
return appUserRepository.getAppUserByFacebookId(profile.id);
}).then((appUser) => {
if (appUser) {
@JoeTheDave
JoeTheDave / cloudSettings
Created October 8, 2017 05:17
Visual Studio Code Settings Sync Gist
{"lastUpload":"2017-10-08T05:17:03.032Z","extensionVersion":"v2.8.2"}
// So instead of this
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
// Use this
import { CSSTransitionGroup } from 'react-transition-group'