https://github.com/felipethome/react-transition-hooks

Helps to manage CSS transitions in React components
https://github.com/felipethome/react-transition-hooks

react react-transition-hooks reactcsstransitiongroup

Last synced: about 5 hours ago
JSON representation

Helps to manage CSS transitions in React components

• Host: GitHub
• URL: https://github.com/felipethome/react-transition-hooks
• Owner: felipethome
• License: bsd-3-clause
• Created: 2016-07-03T05:37:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-05T23:19:39.000Z (almost 7 years ago)
• Last Synced: 2024-11-11T17:48:22.243Z (6 days ago)
• Topics: react, react-transition-hooks, reactcsstransitiongroup
• Language: JavaScript
• Homepage:
• Size: 523 KB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Transition Hooks

The goal of this component is supply a better alternative to [ReactTransitionGroup](https://facebook.github.io/react/docs/animation.html). Why? Because, ReactTransitionGroup animations can not be interrupted. So, if you are with a component entering the group it can not leave until the entering phase is complete. Plus, Facebook will drop support for ReactTransitionGroup soon.

If you have a component currently using ReactTransitionGroup you can just change your import with this component and everything should work as expected.

[Demo using ReactInlineTransitionGroup](http://felipethome.github.io/react-inline-transition-group/demo/index.html)

# How to install

    npm install react-transition-hooks

## Hooks

This component uses the same API names of ReactTransitionGroup. 

- **componentWillAppear(callback)**: Called right after componentDidMount. This is called for the children inside the group for the first render. After the first render this will never be called again.

- **componentDidAppear()**: Called when the callback passed to componentWillAppear is called.

- **componentWillEnter(callback)**: Called when a component just entered the group.

- **componentDidEnter()**: Called when the callback passed to componentWillEnter is called.

- **componentWillLeave(callback)**: Called when a component is leaving the group.

- **componentDidLeave()**: Called when the callback passed to componentWillLeave is called. This is called right after componentWillUnmount.

## Properties

Property name | Description

------------ | -------------

component | The component that will wrap all the children. Default: span

## LICENSE

BSD-3