https://github.com/andresin87/-d3reactstorybookmedium

https://github.com/andresin87/-d3reactstorybookmedium

Last synced: 21 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/andresin87/-d3reactstorybookmedium
• Owner: andresin87
• License: cc0-1.0
• Created: 2016-09-15T06:00:37.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-19T22:58:19.000Z (over 8 years ago)
• Last Synced: 2024-12-04T04:42:50.440Z (3 months ago)
• Language: JavaScript
• Size: 1.6 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# React d3 enter/exit animations

![Gif of end result](typing.gif)

This is a proof of concept implementation of declarative enter-update-exit

transitions built with React and d3js.

The main `FancyText` component's render method is completely

declarative. It renders `Letter`s using a naive loop.

```javascript

    render() {

        let transform = `translate(${this.props.x}, ${this.props.y})`;

        return (

            

                

                    {this.state.alphabet.map((d, i) => (

                        

                     ))}

                

            

        );

    }

```

Each `Letter` component then uses lifecycle hooks from

`ReactTransitionGroup` to do transitions.

```javascript

class Letter extends Component {

    state = {

        y: -60,

        className: 'enter',

        fillOpacity: 1e-6

    }

    componentWillEnter(callback) {

        // start enter transition, then callback()

    }

    componentWillLeave(callback) {

        // start exit transition, then callback()

    }

    componentWillReceiveProps(nextProps) {

        if (this.props.i != nextProps.i) {

            // start update transition

        }

    }

    render() {

        return (

            

                {this.props.d}

            

        );

    }

};

```

Based on Mike Bostock's

[General Update Pattern 4.0](https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598)

block.

## License

CC0 (public domain)