react-awesome-reveal - npm Package Compare versions

Comparing version 4.0.0-beta.1 to 4.0.0-beta.2

dist/main.js

@@ -571,6 +571,6 @@ var $jvNZe$emotionreactjsxruntime = require("@emotion/react/jsx-runtime");
 
-const $c8a4d927fd00b892$var$hiddenCss = $jvNZe$emotionreact.css`
+const $c8a4d927fd00b892$var$hiddenStyles = $jvNZe$emotionreact.css`
   opacity: 0;
 `;
-const $c8a4d927fd00b892$var$textBaseCss = $jvNZe$emotionreact.css`
+const $c8a4d927fd00b892$var$textBaseStyles = $jvNZe$emotionreact.css`
   display: inline-block;
@@ -581,70 +581,28 @@ white-space: pre;
     const { cascade: cascade = false , damping: damping = 0.5 , delay: delay = 0 , duration: duration = 1000 , fraction: fraction = 0 , keyframes: keyframes = $059dd4d1a0e7c5c8$export$d8fce5eeb232a07b , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , childClassName: childClassName , childStyle: childStyle , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const animationStyles = $jvNZe$react.useMemo(()=>$f2597d38a334a0ad$export$cdf1f51c52cf49d8({
+            keyframes: keyframes,
+            duration: duration
+        })
+    , [
+        duration,
+        keyframes
+    ]);
     if ($6a26e8abc0402dd5$export$bedb7023a7733221(children)) return null;
-    if ($6a26e8abc0402dd5$export$f832f653c73e86f8(children)) {
-        const stringifiedChildren = String(children);
-        return cascade ? $jvNZe$emotionreactjsxruntime.jsx($jvNZe$reactintersectionobserver.InView, {
-            threshold: fraction,
-            triggerOnce: triggerOnce,
-            onChange: onVisibilityChange,
-            children: ({ inView: inView , ref: ref  })=>$jvNZe$emotionreactjsxruntime.jsx("div", {
-                    ref: ref,
-                    className: className,
-                    css: [
-                        revealCss,
-                        $c8a4d927fd00b892$var$textBaseCss
-                    ],
-                    style: style,
-                    children: stringifiedChildren.split("").map((char, index)=>$jvNZe$emotionreactjsxruntime.jsx("span", {
-                            className: className,
-                            css: inView ? $f2597d38a334a0ad$export$cdf1f51c52cf49d8({
-                                keyframes: keyframes,
-                                delay: delay + index * duration * damping,
-                                duration: duration
-                            }) : $c8a4d927fd00b892$var$hiddenCss,
-                            children: char
-                        }, index)
-                    )
-                })
-        }) : $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$export$9a32a8eb4bb56ca3, {
-            delay: delay,
-            duration: duration,
-            fraction: fraction,
-            keyframes: keyframes,
-            triggerOnce: triggerOnce,
-            css: revealCss,
-            className: className,
-            style: style,
-            children: stringifiedChildren
-        });
-    }
-    if ($jvNZe$reactis.isFragment(children)) return $jvNZe$emotionreactjsxruntime.jsx($jvNZe$reactintersectionobserver.InView, {
-        threshold: fraction,
-        triggerOnce: triggerOnce,
-        onChange: onVisibilityChange,
-        children: ({ inView: inView , ref: ref  })=>$jvNZe$emotionreactjsxruntime.jsx("div", {
-                ref: ref,
-                className: className,
-                css: inView ? [
-                    revealCss,
-                    $f2597d38a334a0ad$export$cdf1f51c52cf49d8({
-                        keyframes: keyframes,
-                        delay: delay,
-                        duration: duration
-                    })
-                ] : $c8a4d927fd00b892$var$hiddenCss,
-                style: style,
-                children: children
-            })
+    if ($6a26e8abc0402dd5$export$f832f653c73e86f8(children)) return $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$var$TextReveal, {
+        ...props,
+        animationStyles: animationStyles,
+        children: String(children)
     });
+    if ($jvNZe$reactis.isFragment(children)) return $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$var$FragmentReveal, {
+        ...props,
+        animationStyles: animationStyles
+    });
     return $jvNZe$emotionreactjsxruntime.jsx($jvNZe$emotionreactjsxruntime.Fragment, {
         children: $jvNZe$react.Children.map(children, (node, index)=>{
             if (!/*#__PURE__*/ $jvNZe$react.isValidElement(node)) return null;
-            const nodeCss = node.props.css ? [
-                node.props.css
-            ] : [];
-            nodeCss.push($f2597d38a334a0ad$export$cdf1f51c52cf49d8({
-                keyframes: keyframes,
-                delay: delay + (cascade ? index * duration * damping : 0),
-                duration: duration
-            }));
+            const inViewStyles = [
+                revealCss,
+                animationStyles
+            ];
+            const nodeDelay = delay + (cascade ? index * duration * damping : 0);
             switch(node.type){
@@ -662,12 +620,3 @@ case "ol":
                                 children: $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$export$9a32a8eb4bb56ca3, {
-                                    cascade: cascade,
-                                    damping: damping,
-                                    delay: delay,
-                                    duration: duration,
-                                    fraction: fraction,
-                                    keyframes: keyframes,
-                                    triggerOnce: triggerOnce,
-                                    css: revealCss,
-                                    childClassName: childClassName,
-                                    childStyle: childStyle,
+                                    ...props,
                                     children: node.props.children
@@ -687,9 +636,7 @@ })
                                         className: cx(childClassName, node.props.className),
-                                        css: inView ? [
-                                            revealCss,
-                                            ...nodeCss
-                                        ] : $c8a4d927fd00b892$var$hiddenCss,
+                                        css: inView ? inViewStyles : $c8a4d927fd00b892$var$hiddenStyles,
                                         style: {
                                             ...childStyle,
-                                            ...node.props.style
+                                            ...node.props.style,
+                                            animationDelay: nodeDelay + "ms"
                                         }
@@ -707,7 +654,7 @@ })
                                 className: className,
-                                css: inView ? [
-                                    revealCss,
-                                    ...nodeCss
-                                ] : $c8a4d927fd00b892$var$hiddenCss,
-                                style: style,
+                                css: inView ? inViewStyles : $c8a4d927fd00b892$var$hiddenStyles,
+                                style: {
+                                    ...style,
+                                    animationDelay: nodeDelay + "ms"
+                                },
                                 children: $jvNZe$emotionreactjsxruntime.jsx($jvNZe$emotionreact.ClassNames, {
@@ -729,2 +676,49 @@ children: ({ cx: cx  })=>$jvNZe$emotionreactjsxruntime.jsx(node.type, {
 };
+const $c8a4d927fd00b892$var$TextReveal = (props)=>{
+    const { animationStyles: animationStyles , cascade: cascade = false , damping: damping = 0.5 , delay: delay = 0 , duration: duration = 1000 , fraction: fraction = 0 , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const { ref: ref , inView: inView  } = $jvNZe$reactintersectionobserver.useInView({
+        triggerOnce: triggerOnce,
+        threshold: fraction,
+        onChange: onVisibilityChange
+    });
+    return cascade ? $jvNZe$emotionreactjsxruntime.jsx("div", {
+        ref: ref,
+        className: className,
+        css: [
+            revealCss,
+            $c8a4d927fd00b892$var$textBaseStyles
+        ],
+        style: style,
+        children: children.split("").map((char, index)=>$jvNZe$emotionreactjsxruntime.jsx("span", {
+                css: inView ? animationStyles : $c8a4d927fd00b892$var$hiddenStyles,
+                style: {
+                    animationDelay: delay + index * duration * damping + "ms"
+                },
+                children: char
+            }, index)
+        )
+    }) : $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$export$9a32a8eb4bb56ca3, {
+        ...props,
+        children: children
+    });
+};
+const $c8a4d927fd00b892$var$FragmentReveal = (props)=>{
+    const { animationStyles: animationStyles , fraction: fraction = 0 , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const { ref: ref , inView: inView  } = $jvNZe$reactintersectionobserver.useInView({
+        triggerOnce: triggerOnce,
+        threshold: fraction,
+        onChange: onVisibilityChange
+    });
+    const inViewStyles = [
+        revealCss,
+        animationStyles
+    ];
+    return $jvNZe$emotionreactjsxruntime.jsx("div", {
+        ref: ref,
+        className: className,
+        css: inView ? inViewStyles : $c8a4d927fd00b892$var$hiddenStyles,
+        style: style,
+        children: children
+    });
+};
 
@@ -731,0 +725,0 @@

dist/module.js

 import {jsx as $1xU4C$jsx, Fragment as $1xU4C$Fragment} from "@emotion/react/jsx-runtime";
 import {useMemo as $1xU4C$useMemo, Children as $1xU4C$Children, isValidElement as $1xU4C$isValidElement} from "react";
 import {keyframes as $1xU4C$keyframes, css as $1xU4C$css, ClassNames as $1xU4C$ClassNames} from "@emotion/react";
-import {InView as $1xU4C$InView} from "react-intersection-observer";
+import {InView as $1xU4C$InView, useInView as $1xU4C$useInView} from "react-intersection-observer";
 import {isFragment as $1xU4C$isFragment} from "react-is";
@@ -564,6 +564,6 @@
 
-const $dd2a0a37606c7cc8$var$hiddenCss = $1xU4C$css`
+const $dd2a0a37606c7cc8$var$hiddenStyles = $1xU4C$css`
   opacity: 0;
 `;
-const $dd2a0a37606c7cc8$var$textBaseCss = $1xU4C$css`
+const $dd2a0a37606c7cc8$var$textBaseStyles = $1xU4C$css`
   display: inline-block;
@@ -574,70 +574,28 @@ white-space: pre;
     const { cascade: cascade = false , damping: damping = 0.5 , delay: delay = 0 , duration: duration = 1000 , fraction: fraction = 0 , keyframes: keyframes = $138b216f24cd3352$export$d8fce5eeb232a07b , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , childClassName: childClassName , childStyle: childStyle , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const animationStyles = $1xU4C$useMemo(()=>$83a0c63b7d7fa82e$export$cdf1f51c52cf49d8({
+            keyframes: keyframes,
+            duration: duration
+        })
+    , [
+        duration,
+        keyframes
+    ]);
     if ($1c19d828b946891f$export$bedb7023a7733221(children)) return null;
-    if ($1c19d828b946891f$export$f832f653c73e86f8(children)) {
-        const stringifiedChildren = String(children);
-        return cascade ? $1xU4C$jsx($1xU4C$InView, {
-            threshold: fraction,
-            triggerOnce: triggerOnce,
-            onChange: onVisibilityChange,
-            children: ({ inView: inView , ref: ref  })=>$1xU4C$jsx("div", {
-                    ref: ref,
-                    className: className,
-                    css: [
-                        revealCss,
-                        $dd2a0a37606c7cc8$var$textBaseCss
-                    ],
-                    style: style,
-                    children: stringifiedChildren.split("").map((char, index)=>$1xU4C$jsx("span", {
-                            className: className,
-                            css: inView ? $83a0c63b7d7fa82e$export$cdf1f51c52cf49d8({
-                                keyframes: keyframes,
-                                delay: delay + index * duration * damping,
-                                duration: duration
-                            }) : $dd2a0a37606c7cc8$var$hiddenCss,
-                            children: char
-                        }, index)
-                    )
-                })
-        }) : $1xU4C$jsx($dd2a0a37606c7cc8$export$9a32a8eb4bb56ca3, {
-            delay: delay,
-            duration: duration,
-            fraction: fraction,
-            keyframes: keyframes,
-            triggerOnce: triggerOnce,
-            css: revealCss,
-            className: className,
-            style: style,
-            children: stringifiedChildren
-        });
-    }
-    if ($1xU4C$isFragment(children)) return $1xU4C$jsx($1xU4C$InView, {
-        threshold: fraction,
-        triggerOnce: triggerOnce,
-        onChange: onVisibilityChange,
-        children: ({ inView: inView , ref: ref  })=>$1xU4C$jsx("div", {
-                ref: ref,
-                className: className,
-                css: inView ? [
-                    revealCss,
-                    $83a0c63b7d7fa82e$export$cdf1f51c52cf49d8({
-                        keyframes: keyframes,
-                        delay: delay,
-                        duration: duration
-                    })
-                ] : $dd2a0a37606c7cc8$var$hiddenCss,
-                style: style,
-                children: children
-            })
+    if ($1c19d828b946891f$export$f832f653c73e86f8(children)) return $1xU4C$jsx($dd2a0a37606c7cc8$var$TextReveal, {
+        ...props,
+        animationStyles: animationStyles,
+        children: String(children)
     });
+    if ($1xU4C$isFragment(children)) return $1xU4C$jsx($dd2a0a37606c7cc8$var$FragmentReveal, {
+        ...props,
+        animationStyles: animationStyles
+    });
     return $1xU4C$jsx($1xU4C$Fragment, {
         children: $1xU4C$Children.map(children, (node, index)=>{
             if (!/*#__PURE__*/ $1xU4C$isValidElement(node)) return null;
-            const nodeCss = node.props.css ? [
-                node.props.css
-            ] : [];
-            nodeCss.push($83a0c63b7d7fa82e$export$cdf1f51c52cf49d8({
-                keyframes: keyframes,
-                delay: delay + (cascade ? index * duration * damping : 0),
-                duration: duration
-            }));
+            const inViewStyles = [
+                revealCss,
+                animationStyles
+            ];
+            const nodeDelay = delay + (cascade ? index * duration * damping : 0);
             switch(node.type){
@@ -655,12 +613,3 @@ case "ol":
                                 children: $1xU4C$jsx($dd2a0a37606c7cc8$export$9a32a8eb4bb56ca3, {
-                                    cascade: cascade,
-                                    damping: damping,
-                                    delay: delay,
-                                    duration: duration,
-                                    fraction: fraction,
-                                    keyframes: keyframes,
-                                    triggerOnce: triggerOnce,
-                                    css: revealCss,
-                                    childClassName: childClassName,
-                                    childStyle: childStyle,
+                                    ...props,
                                     children: node.props.children
@@ -680,9 +629,7 @@ })
                                         className: cx(childClassName, node.props.className),
-                                        css: inView ? [
-                                            revealCss,
-                                            ...nodeCss
-                                        ] : $dd2a0a37606c7cc8$var$hiddenCss,
+                                        css: inView ? inViewStyles : $dd2a0a37606c7cc8$var$hiddenStyles,
                                         style: {
                                             ...childStyle,
-                                            ...node.props.style
+                                            ...node.props.style,
+                                            animationDelay: nodeDelay + "ms"
                                         }
@@ -700,7 +647,7 @@ })
                                 className: className,
-                                css: inView ? [
-                                    revealCss,
-                                    ...nodeCss
-                                ] : $dd2a0a37606c7cc8$var$hiddenCss,
-                                style: style,
+                                css: inView ? inViewStyles : $dd2a0a37606c7cc8$var$hiddenStyles,
+                                style: {
+                                    ...style,
+                                    animationDelay: nodeDelay + "ms"
+                                },
                                 children: $1xU4C$jsx($1xU4C$ClassNames, {
@@ -722,2 +669,49 @@ children: ({ cx: cx  })=>$1xU4C$jsx(node.type, {
 };
+const $dd2a0a37606c7cc8$var$TextReveal = (props)=>{
+    const { animationStyles: animationStyles , cascade: cascade = false , damping: damping = 0.5 , delay: delay = 0 , duration: duration = 1000 , fraction: fraction = 0 , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const { ref: ref , inView: inView  } = $1xU4C$useInView({
+        triggerOnce: triggerOnce,
+        threshold: fraction,
+        onChange: onVisibilityChange
+    });
+    return cascade ? $1xU4C$jsx("div", {
+        ref: ref,
+        className: className,
+        css: [
+            revealCss,
+            $dd2a0a37606c7cc8$var$textBaseStyles
+        ],
+        style: style,
+        children: children.split("").map((char, index)=>$1xU4C$jsx("span", {
+                css: inView ? animationStyles : $dd2a0a37606c7cc8$var$hiddenStyles,
+                style: {
+                    animationDelay: delay + index * duration * damping + "ms"
+                },
+                children: char
+            }, index)
+        )
+    }) : $1xU4C$jsx($dd2a0a37606c7cc8$export$9a32a8eb4bb56ca3, {
+        ...props,
+        children: children
+    });
+};
+const $dd2a0a37606c7cc8$var$FragmentReveal = (props)=>{
+    const { animationStyles: animationStyles , fraction: fraction = 0 , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const { ref: ref , inView: inView  } = $1xU4C$useInView({
+        triggerOnce: triggerOnce,
+        threshold: fraction,
+        onChange: onVisibilityChange
+    });
+    const inViewStyles = [
+        revealCss,
+        animationStyles
+    ];
+    return $1xU4C$jsx("div", {
+        ref: ref,
+        className: className,
+        css: inView ? inViewStyles : $dd2a0a37606c7cc8$var$hiddenStyles,
+        style: style,
+        children: children
+    });
+};
 
@@ -724,0 +718,0 @@

package.json

 {
   "name": "react-awesome-reveal",
   "description": "React components to add reveal animations using the Intersection Observer API and CSS Animations.",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "license": "MIT",
@@ -61,2 +61,3 @@ "source": "src/index.ts",
     "@emotion/react": "^11.9.0",
+    "@emotion/serialize": "^1.0.3",
     "@parcel/packager-ts": "^2.5.0",
@@ -63,0 +64,0 @@ "@parcel/transformer-typescript-tsc": "^2.5.0",

README.md

@@ -34,4 +34,4 @@ # React Awesome Reveal
 - 🏷 **TypeScript support** – It is written in TypeScript to improve the DX
-- 🍃 **Lightweight** – Very little footprint on your project and no other dependencies required
-- ⚙️ **Uses native APIs** – Intersection Observer and CSS Animations are now supported by all major browsers
+- 🍃 **Lightweight** – Very little footprint on your project
+- ⚙️ **Uses native APIs** – Intersection Observer and CSS Animations are now supported by all browsers
 - 🚀 **Fast** – Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration
@@ -38,0 +38,0 @@ - 💅 **Fully customizable** – Define custom animations and let the library render them

No alert changes

Worsened metrics

Total package byte prevSize

316900

decreased by-0.09%

Dev dependency count

10

increased by11.11%

Lines of code

3560

decreased by-0.28%

No dependency changes