Animation-Wrapper

A Wrapper that use web animation API to animate the children on mount and unmount and destroy itself after unmount

Contents

• Installation
• Usage

Installation

1npm install animation-wrapper

Usage

1import { AnimationWrapper } from "animation-wrapper";
2
3const [show, setShow] = useState(false);
4return (
5  <>
6    <button onClick={() => setShow((state) => !state)}>Click me</button>
7    <AnimationWrapper
8      show={show}
9      options={{ duration: 1500 }}
10      from={{ opacity: 0, transform: "translateY(-100px)" }}
11      to={{ opacity: 1, transform: "translateY(0)" }}
12    >
13      <ChildComponent />
14    </AnimationWrapper>
15  </>
16);
17
18const ChildComponent = () => {
19  const [text, setText] = useState("");
20  return (
21    <input
22      aria-label="string"
23      value={text}
24      onChange={(e) => setText(e.target.value)}
25    />
26  );
27};

API

Property	Type	Default	Description
show	boolean	-	flag used to show/hide the child
children	ReactNode	-	Element to be animated
from	KeyFrame	{ opacity: 0 }	starting position/state of animation when mounting
to	KeyFrame	{ opacity: 1 }	ending position/state of animation when mounting
unmountAnimation	Array	[{ opacity: 0 }, { opacity: 1 }]	animation that needed to occur when unmounting, If not passed, mount animation will be reversed. i.e starts with to prop and ends with from prop
options	object	{ duration: 500, fill: "forwards" }	configuration of animation
className	string	""	className can be passed to change the wrapper style like making inline