https://github.com/bloodyowl/react-transition-child

ES7 decorator to simplify ReactTransitionGroup usage
https://github.com/bloodyowl/react-transition-child

Last synced: 2 months ago
JSON representation

ES7 decorator to simplify ReactTransitionGroup usage

• Host: GitHub
• URL: https://github.com/bloodyowl/react-transition-child
• Owner: bloodyowl
• Created: 2015-06-25T19:51:42.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-07T16:24:18.000Z (about 9 years ago)
• Last Synced: 2024-10-07T10:10:50.231Z (2 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-transition-child

[![Build Status](https://travis-ci.org/bloodyowl/react-transition-child.svg)](https://travis-ci.org/bloodyowl/react-transition-child)

transitionChild is a little ES7 decorator that lets you easily wrap react

components to animate their appearance and disappearance in the DOM.

## install

```console

$ npm install --save bloody-react-transition-child

```

## @transitionChild({ enterDuration = 300, leaveDuration = 300 }) class

wraps a react component. this component will then receive as additional props:

- `enterAnimation`: number (progress of the enterAnimation from 0 to 1)

- `leaveAnimation`: number (progress of the leaveAnimation from 0 to 1)

- `isRunningEnterAnimation`: boolean

- `isRunningLeaveAnimation`: boolean

## example

```javascript

@transitionChild()

class Slide extends Component {

  static propTypes = {

    enterAnimation: PropTypes.number,

    leaveAnimation: PropTypes.number,

    isRunningEnterAnimation: PropTypes.bool,

    isRunningLeaveAnimation: PropTypes.bool,

    comesFrom: PropTypes.oneOf([

      "left",

      "right",

    ]),

  }

  render() {

    const {

      enterAnimation,

      leaveAnimation,

      isRunningEnterAnimation,

      isRunningLeaveAnimation,

      children,

      comesFrom,

    } = this.props

    return (

      


        {children}

      

    )

  }

}

```