baby-i-am-faded - npm Package Compare versions

Comparing version 0.0.14 to 1.0.1

dist/index.d.ts

 import { Keyframes } from '@emotion/serialize';
-import React from 'react';
+import { FC, ReactNode } from 'react';
 export declare type FadedProps = {
+    whenInView?: boolean;
     /**
@@ -25,8 +26,12 @@ * Stagger its children animations
     /**
+     * The initial delay
+     */
+    delay?: number;
+    /**
      * Trigger only the first time the element come in view
      */
     triggerOnce?: boolean;
-    children?: any;
+    children?: ReactNode | ReactNode[];
 };
-export declare const Faded: React.ForwardRefExoticComponent<FadedProps & React.RefAttributes<unknown>>;
+export declare const Faded: FC<FadedProps>;
 export declare function getAnimationCss({ duration, delay, timingFunction, keyframes, iterationCount, }: {
@@ -33,0 +38,0 @@ duration?: number;

dist/index.js

@@ -43,6 +43,5 @@ "use strict";
 exports.Faded = react_1.forwardRef(function (_a, ref1) {
-    var _b = _a.cascade, cascade = _b === void 0 ? false : _b, _c = _a.damping, damping = _c === void 0 ? 0.3 : _c, _d = _a.duration, duration = _d === void 0 ? 400 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.15 : _e, _f = _a.triggerOnce, triggerOnce = _f === void 0 ? false : _f, _g = _a.animation, animation = _g === void 0 ? support_1.fadeInUp : _g, children = _a.children, rest = __rest(_a, ["cascade", "damping", "duration", "threshold", "triggerOnce", "animation", "children"]);
-    var _h = react_intersection_observer_1.useInView({ threshold: threshold, triggerOnce: triggerOnce }), ref = _h[0], inView = _h[1];
-    var combinedRef = ref; // useCombinedRefs(ref1, ref)
-    function makeAnimated(nodes) {
+    var _b = _a.cascade, cascade = _b === void 0 ? false : _b, _c = _a.damping, damping = _c === void 0 ? 0.3 : _c, _d = _a.duration, duration = _d === void 0 ? 400 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.15 : _e, _f = _a.triggerOnce, triggerOnce = _f === void 0 ? false : _f, _g = _a.animation, animation = _g === void 0 ? support_1.fadeInUp : _g, _h = _a.whenInView, whenInView = _h === void 0 ? false : _h, _j = _a.delay, delay = _j === void 0 ? 0 : _j, children = _a.children, rest = __rest(_a, ["cascade", "damping", "duration", "threshold", "triggerOnce", "animation", "whenInView", "delay", "children"]);
+    function makeAnimated(_a) {
+        var inView = _a.inView, nodes = _a.nodes;
         if (!nodes) {
@@ -53,5 +52,6 @@ return null;
             return core_1.jsx('div', {
-                css: getAnimationCss({ keyframes: animation }),
+                css: getAnimationCss({ keyframes: animation, delay: delay }),
             }, nodes);
         }
+        // cascade the words like https://codepen.io/jh3y/pen/wJMPYQ
         if (typeof nodes === 'string') {
@@ -65,3 +65,4 @@ var words_1 = nodes.split(' ');
                         keyframes: animation,
-                        delay: cascade ? index * duration * damping : 0,
+                        delay: delay +
+                            (cascade ? index * duration * damping : 0),
                         duration: duration,
@@ -74,7 +75,9 @@ }), key: index }, index !== words_1.length - 1 ? word + ' ' : word));
             var childElement = node;
-            var css = ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.css) ? [(_b = childElement.props) === null || _b === void 0 ? void 0 : _b.css] : [];
+            var css = ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.css) ? [(_b = childElement.props) === null || _b === void 0 ? void 0 : _b.css]
+                : [];
             if (inView) {
                 css.push(getAnimationCss({
                     keyframes: animation,
-                    delay: cascade ? index * duration * damping : 0,
+                    delay: delay +
+                        (cascade ? index * duration * damping : 0),
                     duration: duration,
@@ -91,3 +94,9 @@ }));
     }
-    return (core_1.jsx("div", __assign({ ref: combinedRef }, rest), makeAnimated(children)));
+    if (whenInView) {
+        return (core_1.jsx(react_intersection_observer_1.InView, __assign({ threshold: threshold, triggerOnce: triggerOnce }, rest), function (_a) {
+            var inView = _a.inView, ref = _a.ref, entry = _a.entry;
+            return (core_1.jsx("div", { ref: ref }, makeAnimated({ inView: inView, nodes: children })));
+        }));
+    }
+    return (core_1.jsx("div", { ref: ref1 }, makeAnimated({ inView: true, nodes: children })));
 });
@@ -94,0 +103,0 @@ function getAnimationCss(_a) {

esm/index.d.ts

 import { Keyframes } from '@emotion/serialize';
-import React from 'react';
+import { FC, ReactNode } from 'react';
 export declare type FadedProps = {
+    whenInView?: boolean;
     /**
@@ -25,8 +26,12 @@ * Stagger its children animations
     /**
+     * The initial delay
+     */
+    delay?: number;
+    /**
      * Trigger only the first time the element come in view
      */
     triggerOnce?: boolean;
-    children?: any;
+    children?: ReactNode | ReactNode[];
 };
-export declare const Faded: React.ForwardRefExoticComponent<FadedProps & React.RefAttributes<unknown>>;
+export declare const Faded: FC<FadedProps>;
 export declare function getAnimationCss({ duration, delay, timingFunction, keyframes, iterationCount, }: {
@@ -33,0 +38,0 @@ duration?: number;

esm/index.js

@@ -30,10 +30,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import React, { forwardRef } from 'react';
-import { useInView } from 'react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import { isFragment } from 'react-is';
 import { cloneElement, fadeInUp } from './support';
 export var Faded = forwardRef(function (_a, ref1) {
-    var _b = _a.cascade, cascade = _b === void 0 ? false : _b, _c = _a.damping, damping = _c === void 0 ? 0.3 : _c, _d = _a.duration, duration = _d === void 0 ? 400 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.15 : _e, _f = _a.triggerOnce, triggerOnce = _f === void 0 ? false : _f, _g = _a.animation, animation = _g === void 0 ? fadeInUp : _g, children = _a.children, rest = __rest(_a, ["cascade", "damping", "duration", "threshold", "triggerOnce", "animation", "children"]);
-    var _h = useInView({ threshold: threshold, triggerOnce: triggerOnce }), ref = _h[0], inView = _h[1];
-    var combinedRef = ref; // useCombinedRefs(ref1, ref)
-    function makeAnimated(nodes) {
+    var _b = _a.cascade, cascade = _b === void 0 ? false : _b, _c = _a.damping, damping = _c === void 0 ? 0.3 : _c, _d = _a.duration, duration = _d === void 0 ? 400 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.15 : _e, _f = _a.triggerOnce, triggerOnce = _f === void 0 ? false : _f, _g = _a.animation, animation = _g === void 0 ? fadeInUp : _g, _h = _a.whenInView, whenInView = _h === void 0 ? false : _h, _j = _a.delay, delay = _j === void 0 ? 0 : _j, children = _a.children, rest = __rest(_a, ["cascade", "damping", "duration", "threshold", "triggerOnce", "animation", "whenInView", "delay", "children"]);
+    function makeAnimated(_a) {
+        var inView = _a.inView, nodes = _a.nodes;
         if (!nodes) {
@@ -44,5 +43,6 @@ return null;
             return jsx('div', {
-                css: getAnimationCss({ keyframes: animation }),
+                css: getAnimationCss({ keyframes: animation, delay: delay }),
             }, nodes);
         }
+        // cascade the words like https://codepen.io/jh3y/pen/wJMPYQ
         if (typeof nodes === 'string') {
@@ -56,3 +56,4 @@ var words_1 = nodes.split(' ');
                         keyframes: animation,
-                        delay: cascade ? index * duration * damping : 0,
+                        delay: delay +
+                            (cascade ? index * duration * damping : 0),
                         duration: duration,
@@ -65,7 +66,9 @@ }), key: index }, index !== words_1.length - 1 ? word + ' ' : word));
             var childElement = node;
-            var css = ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.css) ? [(_b = childElement.props) === null || _b === void 0 ? void 0 : _b.css] : [];
+            var css = ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.css) ? [(_b = childElement.props) === null || _b === void 0 ? void 0 : _b.css]
+                : [];
             if (inView) {
                 css.push(getAnimationCss({
                     keyframes: animation,
-                    delay: cascade ? index * duration * damping : 0,
+                    delay: delay +
+                        (cascade ? index * duration * damping : 0),
                     duration: duration,
@@ -82,3 +85,9 @@ }));
     }
-    return (jsx("div", __assign({ ref: combinedRef }, rest), makeAnimated(children)));
+    if (whenInView) {
+        return (jsx(InView, __assign({ threshold: threshold, triggerOnce: triggerOnce }, rest), function (_a) {
+            var inView = _a.inView, ref = _a.ref, entry = _a.entry;
+            return (jsx("div", { ref: ref }, makeAnimated({ inView: inView, nodes: children })));
+        }));
+    }
+    return (jsx("div", { ref: ref1 }, makeAnimated({ inView: true, nodes: children })));
 });
@@ -85,0 +94,0 @@ export function getAnimationCss(_a) {

package.json

 {
     "name": "baby-i-am-faded",
     "_": "[bump if baby-i-am-faded]",
-    "version": "0.0.14",
+    "version": "1.0.1",
     "description": "",
@@ -17,3 +17,4 @@ "main": "dist/index.js",
         "/dist/*",
-        "/esm/*"
+        "/esm/*",
+        "src"
     ],
@@ -20,0 +21,0 @@ "scripts": {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25781

increased by37.39%

Number of package files

11

increased by22.22%

Lines of code

586

increased by62.78%

Number of low quality alerts

1

decreased by-50%

No dependency changes