joshwcomeau

{
  "name": "redux-thunk",
  "version": "1.0.3",
  "main": "lib/index.js",
  "files": [
    "lib",
    "src"
  ],
  "scripts": {
    "build": "babel src --out-dir lib",

joshwcomeau

<FlipMove
  duration={500}
  delay={10}
  easing={'cubic-bezier(0.25, 0.5, 0.75, 1)'}
  staggerDurationBy={30}
  staggerDelayBy={10}
  onStart={startHandlerFunction}
  onFinish={finishHandlerFunction}
>
  {childrenWithKeys}

joshwcomeau

import React from 'react';
import FlipMove from 'react-flip-move';

const ArticleList = ({articles}) => (
  <FlipMove>
    { articles.map( article => <Article key={article.id} {...article} /> ) }
  </FlipMove>
);

joshwcomeau

componentDidUpdate(previousProps) {
  previousProps.children.forEach( child => {
    let domNode = ReactDOM.findDOMNode( this.refs[child.key] );

    const newBox = domNode.getBoundingClientRect();
    const oldBox = this.state[key];
    
    const deltaX = oldBox.left - newBox.left; 
    const deltaY = oldBox.top  - newBox.top;

joshwcomeau

componentDidUpdate(previousProps) {
  previousProps.children.forEach( child => {
    let domNode = ReactDOM.findDOMNode( this.refs[child.key] );

    const newBox = domNode.getBoundingClientRect();
    const oldBox = this.state[key];
    
    const deltaX = oldBox.left - newBox.left; 
    const deltaY = oldBox.top  - newBox.top;

joshwcomeau

componentDidUpdate(previousProps) {
  previousProps.children.forEach( child => {
    let domNode  = ReactDOM.findDOMNode( this.refs[child.key] );
    const newBox = domNode.getBoundingClientRect();
    
    // ...more to come
  });
}

joshwcomeau

class ArticleList extends Component {
  componentWillReceiveProps() {
    this.props.children.forEach( child => {
      // Find the ref for this specific child.
      const ref = this.refs[child.key]
      
      // Look up the DOM node
      const domNode = ReactDOM.findDOMNode( ref );
      
      // Calculate the bounding box

joshwcomeau

class ArticleList extends Component {
  render() {
    return (    
      <div id="article-list">
        { this.props.articles.map( article => <Article key={article.id} {...article} /> ) }
      </div>
    );
  }
}

joshwcomeau

"use strict";
const connect  = ReactRedux.connect;
const Provider = ReactRedux.Provider;

// REDUCER
const defaultState = { count: 0 };
const appReducer = (state = defaultState, action) => {
  switch ( action.type ) {
    case 'increment':
      return _.extend({}, state, { count: state.count+1 });

joshwcomeau

{
  "_id":      "553d327e594a1b5f1b13f198",
  "url": {
    "thumb":  "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/thumb.jpg",
    "small":  "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/small.jpg",
    "medium": "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/medium.jpg",
    "full":   "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/full.jpg"
  },
  "emotion": [
    {