animation-wrapper v1.1.1

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

npm install animation-wrapper

Usage

import { AnimationWrapper } from "animation-wrapper";

const [show, setShow] = useState(false);
return (
  <>
    <button onClick={() => setShow((state) => !state)}>Click me</button>
    <AnimationWrapper
      show={show}
      options={{ duration: 1500 }}
      from={{ opacity: 0, transform: "translateY(-100px)" }}
      to={{ opacity: 1, transform: "translateY(0)" }}
    >
      <ChildComponent />
    </AnimationWrapper>
  </>
);

const ChildComponent = () => {
  const [text, setText] = useState("");
  return (
    <input
      aria-label="string"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
};

API