joshwcomeau

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

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

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

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

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

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

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

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

joshwcomeau

const immutableProps = propsToCheck => ComposedComponent => {
  return class immutablePropChecker extends Component {
    shouldComponentUpdate(nextProps) {
      return propsToCheck.some( p => this.props[p] !== nextProps[p] );
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

joshwcomeau

@immutableProps(['prop1', 'prop2'])
class Thing extends Component {
  // Stuff
}