react-awesome-reveal 4.0.1 → 4.2.0

package/README.md

@@ -7,7 +7,7 @@
 [![License](https://badgen.net/npm/license/react-awesome-reveal)](https://www.npmjs.com/package/react-awesome-reveal/v/latest)
 [![Rate on Openbase](https://badges.openbase.io/js/rating/react-awesome-reveal.svg)](https://openbase.io/js/react-awesome-reveal?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
 
-[React Awesome Reveal](https://github.com/morellodev/react-awesome-reveal) is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by [Emotion](https://emotion.sh) and implemented as CSS Animations to benefit from hardware acceleration.
+[React Awesome Reveal](https://react-awesome-reveal.morello.dev) is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by [Emotion](https://emotion.sh) and implemented as CSS Animations to benefit from hardware acceleration.
 
 ## Table Of Contents
 
@@ -45,12 +45,18 @@ To add this package as a dependency to your app, simply run
 npm install react-awesome-reveal @emotion/react --save
 ```
 
-or, if you are using Yarn (as I strongly suggest):
+or, if you are using Yarn:
 
 ```sh
 yarn add react-awesome-reveal @emotion/react
 ```
 
+or, if you are using PNPM (as I strongly suggest):
+
+```sh
+pnpm add react-awesome-reveal @emotion/react
+```
+
 ## Quick Start
 
 Import effects from [React Awesome Reveal](https://www.npmjs.com/package/react-awesome-reveal) to your React component, for example the `Fade` effect:
@@ -118,22 +124,16 @@ To chain together multiple animations, set the `cascade` prop to `true`:
 </Fade>
 ```
 
-This is _almost_ equivalent to
+Play with the `damping` prop to alter the delay by which each child will progressively appear:
 
-```jsx
-<Fade>
+```tsx
+<Fade cascade damping={0.1}>
   <p>I enter first...</p>
-</Fade>
-<Fade delay={1000}>
   <p>...then comes my turn...</p>
-</Fade>
-<Fade delay={2000}>
   <p>...and finally you see me!</p>
 </Fade>
 ```
 
-with the exception that, since each `Fade` component creates an isolated visibility context, in the second snippet every `p` will be shown only if they are inside the viewport (after the specified delay).
-
 ## Custom Animations
 
 Starting from version 3.2.0, you can define custom animations! Simply import the `Reveal` component (which is the default export of the library – give it the name you want) and pass it a `keyframes` prop:
@@ -155,12 +155,8 @@ const customAnimation = keyframes`
   }
 `;
 
-function MyAnimatedComponent({ children }) {
-  return (
-    <Reveal keyframes={customAnimation}>
-      {children}
-    </Reveal>;
-  );
+function CustomAnimation({ children }) {
+  return <Reveal keyframes={customAnimation}>{children}</Reveal>;
 }
 ```
 

package/dist/{types.d.ts → index.d.ts}

@@ -1,6 +1,6 @@
-import { Interpolation, Theme } from "@emotion/react";
-import { Keyframes } from "@emotion/serialize";
-export interface RevealProps {
+import { Keyframes } from '@emotion/serialize';
+
+interface RevealProps {
     /**
      * Stagger its children animations.
      * @default false
@@ -35,10 +35,6 @@ export interface RevealProps {
      * @default false
      */
     triggerOnce?: boolean;
-    /**
-     * Custom Emotion styles.
-     */
-    css?: Interpolation<Theme>;
     /**
      * Class names to add to the container element.
      */
@@ -70,18 +66,20 @@ export interface RevealProps {
      */
     onVisibilityChange?(inView: boolean, entry: IntersectionObserverEntry): void;
 }
-export const Reveal: React.FC<RevealProps>;
+declare const Reveal: React.FC<RevealProps>;
+
 type AttentionSeekerEffect = "bounce" | "flash" | "headShake" | "heartBeat" | "jello" | "pulse" | "rubberBand" | "shake" | "shakeX" | "shakeY" | "swing" | "tada" | "wobble";
-export interface AttentionSeekerProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface AttentionSeekerProps extends Omit<RevealProps, "keyframes"> {
     /**
      * The animation effect to use for this attention seeker.
      * @default "bounce"
      */
     effect?: AttentionSeekerEffect;
 }
-export const AttentionSeeker: React.FC<AttentionSeekerProps>;
+declare const AttentionSeeker: React.FC<AttentionSeekerProps>;
+
 type BounceDirection = "down" | "left" | "right" | "up";
-export interface BounceProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface BounceProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Origin of the animation.
      * @default undefined
@@ -93,9 +91,10 @@ export interface BounceProps extends Omit<RevealProps, "keyframes" | "css"> {
      */
     reverse?: boolean;
 }
-export const Bounce: React.FC<BounceProps>;
+declare const Bounce: React.FC<BounceProps>;
+
 type FadeDirection = "bottom-left" | "bottom-right" | "down" | "left" | "right" | "top-left" | "top-right" | "up";
-export interface FadeProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface FadeProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Causes the animation to start farther. Only works with "down", "left", "right" and "up" directions.
      * @default false
@@ -112,9 +111,10 @@ export interface FadeProps extends Omit<RevealProps, "keyframes" | "css"> {
      */
     reverse?: boolean;
 }
-export const Fade: React.FC<FadeProps>;
+declare const Fade: React.FC<FadeProps>;
+
 type FlipDirection = "horizontal" | "vertical";
-export interface FlipProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface FlipProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Axis direction of the animation.
      * @default undefined
@@ -126,21 +126,25 @@ export interface FlipProps extends Omit<RevealProps, "keyframes" | "css"> {
      */
     reverse?: boolean;
 }
-export const Flip: React.FC<FlipProps>;
-export type HingeProps = Omit<RevealProps, "keyframes" | "css">;
-export const Hinge: React.FC<HingeProps>;
-export type JackInTheBoxProps = Omit<RevealProps, "keyframes" | "css">;
-export const JackInTheBox: React.FC<JackInTheBoxProps>;
-export interface RollProps extends Omit<RevealProps, "keyframes" | "css"> {
+declare const Flip: React.FC<FlipProps>;
+
+type HingeProps = Omit<RevealProps, "keyframes">;
+declare const Hinge: React.FC<HingeProps>;
+
+type JackInTheBoxProps = Omit<RevealProps, "keyframes">;
+declare const JackInTheBox: React.FC<JackInTheBoxProps>;
+
+interface RollProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Specifies if the animation should make element(s) disappear.
      * @default false
      */
     reverse?: boolean;
 }
-export const Roll: React.FC<RollProps>;
+declare const Roll: React.FC<RollProps>;
+
 type RotateDirection = "bottom-left" | "bottom-right" | "top-left" | "top-right";
-export interface RotateProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface RotateProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Origin of the animation.
      * @default undefined
@@ -152,9 +156,10 @@ export interface RotateProps extends Omit<RevealProps, "keyframes" | "css"> {
      */
     reverse?: boolean;
 }
-export const Rotate: React.FC<RotateProps>;
+declare const Rotate: React.FC<RotateProps>;
+
 type SlideDirection = "down" | "left" | "right" | "up";
-export interface SlideProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface SlideProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Origin of the animation.
      * @default undefined
@@ -166,9 +171,10 @@ export interface SlideProps extends Omit<RevealProps, "keyframes" | "css"> {
      */
     reverse?: boolean;
 }
-export const Slide: React.FC<SlideProps>;
+declare const Slide: React.FC<SlideProps>;
+
 type ZoomDirection = "down" | "left" | "right" | "up";
-export interface ZoomProps extends Omit<RevealProps, "keyframes" | "css"> {
+interface ZoomProps extends Omit<RevealProps, "keyframes"> {
     /**
      * Origin of the animation.
      * @default undefined
@@ -180,6 +186,6 @@ export interface ZoomProps extends Omit<RevealProps, "keyframes" | "css"> {
      */
     reverse?: boolean;
 }
-export const Zoom: React.FC<ZoomProps>;
+declare const Zoom: React.FC<ZoomProps>;
 
-//# sourceMappingURL=types.d.ts.map
+export { AttentionSeeker, AttentionSeekerProps, Bounce, BounceProps, Fade, FadeProps, Flip, FlipProps, Hinge, HingeProps, JackInTheBox, JackInTheBoxProps, Reveal, RevealProps, Roll, RollProps, Rotate, RotateProps, Slide, SlideProps, Zoom, ZoomProps, Reveal as default };