react-delegate-transition-group
v16.0.0
Published
Low-level API for custom animations
Downloads
38
Readme
React Delegate Transition Group
Low-level API for custom animations.
Essentially the same as react-transition-group except that lifecycle hooks (called when children are added or removed) are handled by the parent component rather than its children.
Installation
npm install --save react-delegate-transition-group
Usage
import DelegateTransitionGroup from 'react-delegate-transition-group';
import { createElement } from 'react';
import { findDOMNode } from 'react-dom';
class ExampleAnimation extends Component {
childWillEnter = (component, callback) => {
const parent = findDOMNode(this);
const child = findDOMNode(component);
const { height } = child.getBoundingClientRect();
parent.style.height = `${height}px`;
setTimeout(callback, 400);
}
render() {
return createElement(DelegateTransitionGroup, { ...this.props, onEnter: this.childWillEnter });
}
}
export default ExampleAnimation;
For example implementations see:
Reference
onAppear(component, callback)
- Called at the same time as componentDidMount() for components that are initially mounted in a DelegateTransitionGroup.It will block other animations from occurring until callback is called. It is only called on the initial render of a DelegateTransitionGroup
onEnter(component, callback)
- Called at the same time as componentDidMount() for components added to an existing DelegateTransitionGroup.It will block other animations from occurring until callback is called. It will not be called on the initial render of a TransitionGroup.
onLeave(component, callback)
- Called when the child has been removed from the DelegateTransitionGroup.Though the child has been removed, DelegateTransitionGroup will keep it in the DOM until callback is called.