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

Comparing version 4.0.2 to 4.0.3

dist/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Faded = void 0;
 const react_1 = __importStar(require("react"));
@@ -34,4 +47,4 @@ const react_intersection_observer_1 = require("react-intersection-observer");
 };
-exports.Faded = react_1.forwardRef(({ as: As = 'div', cascade = false, duration = 400, threshold = 0.15, className, cascadeIncrement = 200, triggerOnce = false, animationName, timingFunction = 'ease-out', whenInView = false, delay = 0, style, children, ...rest }, ref1) => {
-    const variablesStyle = react_1.useMemo(() => {
+exports.Faded = (0, react_1.forwardRef)(({ as: As = 'div', cascade = false, duration = 400, threshold = 0.2, className = '', cascadeIncrement = 140, triggerOnce = false, animationName, timingFunction = 'ease-out', whenInView = false, delay = 0, style, children, ...rest }, ref1) => {
+    const variablesStyle = (0, react_1.useMemo)(() => {
         const variablesStyle = { ...style };
@@ -50,2 +63,5 @@ variablesStyle['--increment'] = `${cascadeIncrement}ms`;
         }
+        if (whenInView && !delay) {
+            variablesStyle['--initial-delay'] = `100ms`;
+        }
         if (animationName) {
@@ -57,8 +73,11 @@ variablesStyle['--animationName'] = animationName;
     if (whenInView) {
-        return (react_1.default.createElement(react_intersection_observer_1.InView, { threshold: threshold, triggerOnce: triggerOnce }, ({ inView, ref, entry }) => (react_1.default.createElement(As, Object.assign({ style: variablesStyle, className: className + inView
-                ? ` biaf${cascade ? 'Cascade' : 'NonCascade'}`
-                : 'biafHidden', ref: ref }, rest), children))));
+        return (react_1.default.createElement(react_intersection_observer_1.InView, { threshold: threshold, triggerOnce: triggerOnce }, ({ inView, ref, entry }) => {
+            return (react_1.default.createElement(As, { style: variablesStyle, className: className +
+                    (inView
+                        ? ` biaf${cascade ? 'Cascade' : 'NonCascade'}`
+                        : ' biafHidden'), ref: ref, ...rest }, children));
+        }));
     }
-    return (react_1.default.createElement(As, Object.assign({ className: className + ` biaf${cascade ? 'Cascade' : 'NonCascade'}`, style: variablesStyle, ref: ref1 }, rest), children));
+    return (react_1.default.createElement(As, { className: className + ` biaf${cascade ? 'Cascade' : 'NonCascade'}`, style: variablesStyle, ref: ref1, ...rest }, children));
 });
 //# sourceMappingURL=index.js.map

dist/support.js

@@ -6,2 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCombinedRefs = void 0;
 const react_1 = __importDefault(require("react"));
@@ -8,0 +9,0 @@ function useCombinedRefs(...refs) {

esm/index.js

@@ -25,3 +25,3 @@ import React, { forwardRef, useMemo, } from 'react';
 };
-export const Faded = forwardRef(({ as: As = 'div', cascade = false, duration = 400, threshold = 0.15, className, cascadeIncrement = 200, triggerOnce = false, animationName, timingFunction = 'ease-out', whenInView = false, delay = 0, style, children, ...rest }, ref1) => {
+export const Faded = forwardRef(({ as: As = 'div', cascade = false, duration = 400, threshold = 0.2, className = '', cascadeIncrement = 140, triggerOnce = false, animationName, timingFunction = 'ease-out', whenInView = false, delay = 0, style, children, ...rest }, ref1) => {
     const variablesStyle = useMemo(() => {
@@ -41,2 +41,5 @@ const variablesStyle = { ...style };
         }
+        if (whenInView && !delay) {
+            variablesStyle['--initial-delay'] = `100ms`;
+        }
         if (animationName) {
@@ -48,8 +51,11 @@ variablesStyle['--animationName'] = animationName;
     if (whenInView) {
-        return (React.createElement(InView, { threshold: threshold, triggerOnce: triggerOnce }, ({ inView, ref, entry }) => (React.createElement(As, Object.assign({ style: variablesStyle, className: className + inView
-                ? ` biaf${cascade ? 'Cascade' : 'NonCascade'}`
-                : 'biafHidden', ref: ref }, rest), children))));
+        return (React.createElement(InView, { threshold: threshold, triggerOnce: triggerOnce }, ({ inView, ref, entry }) => {
+            return (React.createElement(As, { style: variablesStyle, className: className +
+                    (inView
+                        ? ` biaf${cascade ? 'Cascade' : 'NonCascade'}`
+                        : ' biafHidden'), ref: ref, ...rest }, children));
+        }));
     }
-    return (React.createElement(As, Object.assign({ className: className + ` biaf${cascade ? 'Cascade' : 'NonCascade'}`, style: variablesStyle, ref: ref1 }, rest), children));
+    return (React.createElement(As, { className: className + ` biaf${cascade ? 'Cascade' : 'NonCascade'}`, style: variablesStyle, ref: ref1, ...rest }, children));
 });
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "baby-i-am-faded",
     "_": "[bump if baby-i-am-faded]",
-    "version": "4.0.2",
+    "version": "4.0.3",
     "description": "Reveal animation for react",
@@ -36,4 +36,2 @@ "main": "dist/index.js",
         "@babel/core": "^7.9.0",
-        "@chakra-ui/react": "latest",
-        "@emotion/react": "^11",
         "@storybook/addon-actions": "^5.3.17",
@@ -44,3 +42,2 @@ "@storybook/addon-links": "^5.3.17",
         "@storybook/react": "^5.3.17",
-        "@types/mocha": "^5.2.7",
         "@types/node": "^12.0.7",
@@ -50,8 +47,6 @@ "@types/react": "^16.9.25",
         "dotenv": "^8.2.0",
-        "mocha": "^6.1.4",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "sucrase": "^3.12.1",
-        "ts-loader": "^6.2.2",
-        "typescript": "^3.8.3"
+        "ts-loader": "^6.2.2"
     },
@@ -58,0 +53,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

31624

increased by4.38%

Dev dependency count

14

decreased by-26.32%

Lines of code

615

increased by5.49%

No dependency changes