react-transitions-library

React-Transitions-Library

Installation

Install react-tranisions-library via yarn or npm

yarn

yarn add react-transitions-library react-transition-group

npm

npm install react-transitions-library react-transition-group

Docs

Homepage

Available Transition

• OpacityTransition
• FadeInTransition
• FadeOutTransition
• FadeInUpTransition
• FadeOutDownTransition
• ZoomTransition
• ZoomInTransition
• ZoomOutTransition
• BackdropTransition
• BlurTransition
• ScaleTransition
• SlideYTransition
• TranslateTransition
• ShakeTransition
• Custom Transition

Examples

Single Transition

const Example = () => {
    const [show, setShow] = useState(false);
    return (
    	<div>
          <FadeInTransition timeout={400} from={0} to={1} in={show}>
            React Transitions Library
          </FadeInTransition>
          <button onClick={() => setShow(true)}>in</button>
          <button onClick={() => setShow(false)}>out</button>
    	</div> 
    );
}

Combined Transition

const Example = () => {
    const [show, setShow] = useState(false);
    return (
        <div>
          <FadeInTransition in={show} timeout={400} from={0} to={1}>
            <ZoomInTransition in={show} from={0.8} to={1} timeout={400}>
              <h1>React Transitions Library</h1>
            </ZoomInTransition>
          </FadeInTransition>
          <button onClick={() => setShow(true)}>in</button>
          <button onClick={() => setShow(false)}>out</button>
        </div> 
    );
}

Transition Group

Transition on mount and on unmount.

const FadeInZoomInTransition = ({ children, ...props }) => (
	<FadeInTransition {...props} timeout={400} from={0} to={1}>
          <ZoomInTransition {...props} from={0.8} to={1} timeout={400}>
            {children}
          </ZoomInTransition>
	</FadeInTransition>
);

const Example = () => {
    const [show, setShow] = useState(false);
    return (
        <div>
          <TransitionGroup>
            {show ? (
            	<FadeInZoomInTransition key={"FadeInZoomInTransition"}>
                  <h1>React Transitions Library</h1>
            	</FadeInZoomInTransition>
            ) : null}
          </TransitionGroup>
          <button onClick={() => setShow(true)}>in</button>
          <button onClick={() => setShow(false)}>out</button>
        </div> 
    );
}

Note

Feel free to create a Pull Request.