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

Comparing version 3.0.3 to 4.0.1

dist/index.d.ts

@@ -1,3 +0,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ElementType, FC, ReactNode } from 'react';
 export declare type FadedProps = {
+    as?: ElementType;
     whenInView?: boolean;
@@ -9,5 +10,5 @@ /**
     /**
-     * Makes The stagger animation slower, must be higher than one
+     * The amount of time between one element animation and the next in milliseconds
      */
-    damping?: number;
+    cascadeIncrement?: number;
     /**
@@ -20,3 +21,3 @@ * duration in milliseconds
      */
-    animationName: string;
+    animationName?: string;
     /**
@@ -33,3 +34,3 @@ * The ratio with the element is triggered when in view, from 0 to 1
      */
-    timingFunction?: CSSProperties['animationTimingFunction'];
+    timingFunction?: keyof typeof timingFunctions;
     /**
@@ -41,5 +42,26 @@ * Trigger only the first time the element come in view
 } & ComponentPropsWithoutRef<'div'>;
+declare const timingFunctions: {
+    linear: string;
+    ease: string;
+    'ease-in': string;
+    'ease-out': string;
+    'ease-in-out': string;
+    'ease-in-back': string;
+    'ease-out-back': string;
+    'ease-in-out-back': string;
+    'ease-in-sine': string;
+    'ease-out-sine': string;
+    'ease-in-out-sine': string;
+    'ease-in-quad': string;
+    'ease-out-quad': string;
+    'ease-in-out-quad': string;
+    'ease-in-cubic': string;
+    'ease-out-cubic': string;
+    'ease-in-out-cubic': string;
+    'ease-in-quart': string;
+    'ease-out-quart': string;
+    'ease-in-out-quart': string;
+};
 export declare const Faded: FC<FadedProps>;
-export declare function getAnimationCss(keyframes: string, delay: number, duration: number, timingFunction: string): {
-    animation: string;
-};
+export {};
+//# sourceMappingURL=index.d.ts.map

dist/index.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importStar = (this && this.__importStar) || function (mod) {
@@ -32,61 +10,53 @@ if (mod && mod.__esModule) return mod;
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_intersection_observer_1 = require("react-intersection-observer");
-var react_is_1 = require("react-is");
-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 ? 1 : _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, animation = _a.animationName, _g = _a.timingFunction, timingFunction = _g === void 0 ? 'ease-in-out' : _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", "animationName", "timingFunction", "whenInView", "delay", "children"]);
-    if (damping < 0.1) {
-        throw new Error("damping must not be zero or near zero");
-    }
-    function makeAnimated(_a) {
-        var inView = _a.inView, nodes = _a.nodes;
-        if (!nodes) {
-            return null;
-        }
-        if (react_is_1.isFragment(nodes)) {
-            return react_1.default.createElement('div', {
-                style: getAnimationCss(animation, delay, duration, timingFunction),
-            }, nodes);
-        }
-        // cascade the words like https://codepen.io/jh3y/pen/wJMPYQ
-        if (typeof nodes === 'string') {
-            var words_1 = nodes.split(' ');
-            return words_1.map(function (word, index) {
-                return (react_1.default.createElement("span", { style: __assign({ display: 'inline-block', whiteSpace: 'pre' }, getAnimationCss(animation, delay +
-                        (cascade
-                            ? (index * duration) / (2 / damping)
-                            : 0), duration, timingFunction)), key: index }, index !== words_1.length - 1 ? word + ' ' : word));
-            });
-        }
-        return react_1.default.Children.map(nodes, function (node, index) {
-            var _a, _b;
-            if (!react_1.isValidElement(node)) {
-                return node;
+const react_1 = __importStar(require("react"));
+const react_intersection_observer_1 = require("react-intersection-observer");
+const timingFunctions = {
+    linear: 'cubic-bezier(.250, .250, .750, .750)',
+    ease: 'cubic-bezier(.250, .100, .250, 1)',
+    'ease-in': 'cubic-bezier(.420, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(.000, 0, .580, 1)',
+    'ease-in-out': 'cubic-bezier(.420, 0, .580, 1)',
+    'ease-in-back': 'cubic-bezier(.6, -.28, .735, .045)',
+    'ease-out-back': 'cubic-bezier(.175, .885, .32, 1.275)',
+    'ease-in-out-back': 'cubic-bezier(.68, -.55, .265, 1.55)',
+    'ease-in-sine': 'cubic-bezier(.47, 0, .745, .715)',
+    'ease-out-sine': 'cubic-bezier(.39, .575, .565, 1)',
+    'ease-in-out-sine': 'cubic-bezier(.445, .05, .55, .95)',
+    'ease-in-quad': 'cubic-bezier(.55, .085, .68, .53)',
+    'ease-out-quad': 'cubic-bezier(.25, .46, .45, .94)',
+    'ease-in-out-quad': 'cubic-bezier(.455, .03, .515, .955)',
+    'ease-in-cubic': 'cubic-bezier(.55, .085, .68, .53)',
+    'ease-out-cubic': 'cubic-bezier(.25, .46, .45, .94)',
+    'ease-in-out-cubic': 'cubic-bezier(.455, .03, .515, .955)',
+    'ease-in-quart': 'cubic-bezier(.55, .085, .68, .53)',
+    'ease-out-quart': 'cubic-bezier(.25, .46, .45, .94)',
+    'ease-in-out-quart': 'cubic-bezier(.455, .03, .515, .955)',
+};
+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(() => {
+        const variablesStyle = { ...style };
+        variablesStyle['--increment'] = `${cascadeIncrement}ms`;
+        variablesStyle['--duration'] = `${duration}ms`;
+        variablesStyle['--easing'] =
+            timingFunctions[timingFunction] || timingFunction;
+        if (delay) {
+            if (!cascade) {
+                variablesStyle['--delay'] = delay;
             }
-            var childElement = node;
-            var style = ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.style) ? __assign({}, (_b = childElement.props) === null || _b === void 0 ? void 0 : _b.style) : {};
-            if (inView) {
-                Object.assign(style, getAnimationCss(animation, delay + (index * duration) / (2 / damping), duration, timingFunction));
-            }
             else {
-                Object.assign(style, { opacity: 0 });
+                variablesStyle['--initial-delay'] = `${delay}ms`;
             }
-            return react_1.cloneElement(childElement, {
-                style: style,
-            });
-        });
-    }
+        }
+        if (animationName) {
+            variablesStyle['--animationName'] = animationName;
+        }
+        return variablesStyle;
+    }, [style, animationName, delay, duration, timingFunction, cascade]);
     if (whenInView) {
-        return (react_1.default.createElement(react_intersection_observer_1.InView, { threshold: threshold, triggerOnce: triggerOnce }, function (_a) {
-            var inView = _a.inView, ref = _a.ref, entry = _a.entry;
-            return (react_1.default.createElement("div", __assign({ ref: ref }, rest), makeAnimated({ inView: inView, nodes: children })));
-        }));
+        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("div", __assign({ ref: ref1 }, rest), makeAnimated({ inView: true, nodes: children })));
+    return (react_1.default.createElement(As, Object.assign({ className: className + ` biaf${cascade ? 'Cascade' : 'NonCascade'}`, style: variablesStyle, ref: ref1 }, rest), children));
 });
-function getAnimationCss(keyframes, delay, duration, timingFunction) {
-    return {
-        animation: duration + "ms " + keyframes + " " + delay + "ms normal both running " + timingFunction,
-    };
-}
-exports.getAnimationCss = getAnimationCss;
+//# sourceMappingURL=index.js.map

dist/support.d.ts

 import React from 'react';
 export declare function useCombinedRefs(...refs: any[]): React.MutableRefObject<undefined>;
+//# sourceMappingURL=support.d.ts.map

dist/support.js

@@ -6,11 +6,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-function useCombinedRefs() {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
-    var targetRef = react_1.default.useRef();
-    react_1.default.useEffect(function () {
-        refs.forEach(function (ref) {
+const react_1 = __importDefault(require("react"));
+function useCombinedRefs(...refs) {
+    const targetRef = react_1.default.useRef();
+    react_1.default.useEffect(() => {
+        refs.forEach((ref) => {
             if (!ref)
@@ -29,1 +25,2 @@ return;
 exports.useCombinedRefs = useCombinedRefs;
+//# sourceMappingURL=support.js.map

esm/index.d.ts

@@ -1,3 +0,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ElementType, FC, ReactNode } from 'react';
 export declare type FadedProps = {
+    as?: ElementType;
     whenInView?: boolean;
@@ -9,5 +10,5 @@ /**
     /**
-     * Makes The stagger animation slower, must be higher than one
+     * The amount of time between one element animation and the next in milliseconds
      */
-    damping?: number;
+    cascadeIncrement?: number;
     /**
@@ -20,3 +21,3 @@ * duration in milliseconds
      */
-    animationName: string;
+    animationName?: string;
     /**
@@ -33,3 +34,3 @@ * The ratio with the element is triggered when in view, from 0 to 1
      */
-    timingFunction?: CSSProperties['animationTimingFunction'];
+    timingFunction?: keyof typeof timingFunctions;
     /**
@@ -41,5 +42,26 @@ * Trigger only the first time the element come in view
 } & ComponentPropsWithoutRef<'div'>;
+declare const timingFunctions: {
+    linear: string;
+    ease: string;
+    'ease-in': string;
+    'ease-out': string;
+    'ease-in-out': string;
+    'ease-in-back': string;
+    'ease-out-back': string;
+    'ease-in-out-back': string;
+    'ease-in-sine': string;
+    'ease-out-sine': string;
+    'ease-in-out-sine': string;
+    'ease-in-quad': string;
+    'ease-out-quad': string;
+    'ease-in-out-quad': string;
+    'ease-in-cubic': string;
+    'ease-out-cubic': string;
+    'ease-in-out-cubic': string;
+    'ease-in-quart': string;
+    'ease-out-quart': string;
+    'ease-in-out-quart': string;
+};
 export declare const Faded: FC<FadedProps>;
-export declare function getAnimationCss(keyframes: string, delay: number, duration: number, timingFunction: string): {
-    animation: string;
-};
+export {};
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -1,81 +0,52 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import React, { forwardRef, useMemo, } from 'react';
+import { InView } from 'react-intersection-observer';
+const timingFunctions = {
+    linear: 'cubic-bezier(.250, .250, .750, .750)',
+    ease: 'cubic-bezier(.250, .100, .250, 1)',
+    'ease-in': 'cubic-bezier(.420, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(.000, 0, .580, 1)',
+    'ease-in-out': 'cubic-bezier(.420, 0, .580, 1)',
+    'ease-in-back': 'cubic-bezier(.6, -.28, .735, .045)',
+    'ease-out-back': 'cubic-bezier(.175, .885, .32, 1.275)',
+    'ease-in-out-back': 'cubic-bezier(.68, -.55, .265, 1.55)',
+    'ease-in-sine': 'cubic-bezier(.47, 0, .745, .715)',
+    'ease-out-sine': 'cubic-bezier(.39, .575, .565, 1)',
+    'ease-in-out-sine': 'cubic-bezier(.445, .05, .55, .95)',
+    'ease-in-quad': 'cubic-bezier(.55, .085, .68, .53)',
+    'ease-out-quad': 'cubic-bezier(.25, .46, .45, .94)',
+    'ease-in-out-quad': 'cubic-bezier(.455, .03, .515, .955)',
+    'ease-in-cubic': 'cubic-bezier(.55, .085, .68, .53)',
+    'ease-out-cubic': 'cubic-bezier(.25, .46, .45, .94)',
+    'ease-in-out-cubic': 'cubic-bezier(.455, .03, .515, .955)',
+    'ease-in-quart': 'cubic-bezier(.55, .085, .68, .53)',
+    'ease-out-quart': 'cubic-bezier(.25, .46, .45, .94)',
+    'ease-in-out-quart': 'cubic-bezier(.455, .03, .515, .955)',
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { cloneElement, forwardRef, isValidElement, } from 'react';
-import { InView } from 'react-intersection-observer';
-import { isFragment } from 'react-is';
-export var Faded = forwardRef(function (_a, ref1) {
-    var _b = _a.cascade, cascade = _b === void 0 ? false : _b, _c = _a.damping, damping = _c === void 0 ? 1 : _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, animation = _a.animationName, _g = _a.timingFunction, timingFunction = _g === void 0 ? 'ease-in-out' : _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", "animationName", "timingFunction", "whenInView", "delay", "children"]);
-    if (damping < 0.1) {
-        throw new Error("damping must not be zero or near zero");
-    }
-    function makeAnimated(_a) {
-        var inView = _a.inView, nodes = _a.nodes;
-        if (!nodes) {
-            return null;
-        }
-        if (isFragment(nodes)) {
-            return React.createElement('div', {
-                style: getAnimationCss(animation, delay, duration, timingFunction),
-            }, nodes);
-        }
-        // cascade the words like https://codepen.io/jh3y/pen/wJMPYQ
-        if (typeof nodes === 'string') {
-            var words_1 = nodes.split(' ');
-            return words_1.map(function (word, index) {
-                return (React.createElement("span", { style: __assign({ display: 'inline-block', whiteSpace: 'pre' }, getAnimationCss(animation, delay +
-                        (cascade
-                            ? (index * duration) / (2 / damping)
-                            : 0), duration, timingFunction)), key: index }, index !== words_1.length - 1 ? word + ' ' : word));
-            });
-        }
-        return React.Children.map(nodes, function (node, index) {
-            var _a, _b;
-            if (!isValidElement(node)) {
-                return node;
+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) => {
+    const variablesStyle = useMemo(() => {
+        const variablesStyle = { ...style };
+        variablesStyle['--increment'] = `${cascadeIncrement}ms`;
+        variablesStyle['--duration'] = `${duration}ms`;
+        variablesStyle['--easing'] =
+            timingFunctions[timingFunction] || timingFunction;
+        if (delay) {
+            if (!cascade) {
+                variablesStyle['--delay'] = delay;
             }
-            var childElement = node;
-            var style = ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.style) ? __assign({}, (_b = childElement.props) === null || _b === void 0 ? void 0 : _b.style) : {};
-            if (inView) {
-                Object.assign(style, getAnimationCss(animation, delay + (index * duration) / (2 / damping), duration, timingFunction));
-            }
             else {
-                Object.assign(style, { opacity: 0 });
+                variablesStyle['--initial-delay'] = `${delay}ms`;
             }
-            return cloneElement(childElement, {
-                style: style,
-            });
-        });
-    }
+        }
+        if (animationName) {
+            variablesStyle['--animationName'] = animationName;
+        }
+        return variablesStyle;
+    }, [style, animationName, delay, duration, timingFunction, cascade]);
     if (whenInView) {
-        return (React.createElement(InView, { threshold: threshold, triggerOnce: triggerOnce }, function (_a) {
-            var inView = _a.inView, ref = _a.ref, entry = _a.entry;
-            return (React.createElement("div", __assign({ ref: ref }, rest), makeAnimated({ inView: inView, nodes: children })));
-        }));
+        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("div", __assign({ ref: ref1 }, rest), makeAnimated({ inView: true, nodes: children })));
+    return (React.createElement(As, Object.assign({ className: className + ` biaf${cascade ? 'Cascade' : 'NonCascade'}`, style: variablesStyle, ref: ref1 }, rest), children));
 });
-export function getAnimationCss(keyframes, delay, duration, timingFunction) {
-    return {
-        animation: duration + "ms " + keyframes + " " + delay + "ms normal both running " + timingFunction,
-    };
-}
+//# sourceMappingURL=index.js.map

esm/support.d.ts

 import React from 'react';
 export declare function useCombinedRefs(...refs: any[]): React.MutableRefObject<undefined>;
+//# sourceMappingURL=support.d.ts.map

esm/support.js

 import React from 'react';
-export function useCombinedRefs() {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
-    var targetRef = React.useRef();
-    React.useEffect(function () {
-        refs.forEach(function (ref) {
+export function useCombinedRefs(...refs) {
+    const targetRef = React.useRef();
+    React.useEffect(() => {
+        refs.forEach((ref) => {
             if (!ref)
@@ -22,1 +18,2 @@ return;
 }
+//# sourceMappingURL=support.js.map

package.json

 {
     "name": "baby-i-am-faded",
     "_": "[bump if baby-i-am-faded]",
-    "version": "3.0.3",
-    "description": "",
+    "version": "4.0.1",
+    "description": "Reveal animation for react",
     "main": "dist/index.js",
@@ -16,4 +16,5 @@ "module": "esm/index.js",
     "files": [
-        "/dist/*",
-        "/esm/*",
+        "dist",
+        "esm",
+        "styles.css",
         "src"
@@ -47,3 +48,2 @@ ],
         "babel-loader": "^8.1.0",
-        "chromatic": "^5.0.0",
         "dotenv": "^8.2.0",
@@ -53,3 +53,2 @@ "mocha": "^6.1.4",
         "react-dom": "^16.13.1",
-        "react-emotion-animations": "2.x.x",
         "sucrase": "^3.12.1",
@@ -59,7 +58,8 @@ "ts-loader": "^6.2.2",
     },
-    "peerDependencies": {},
+    "peerDependencies": {
+        "react": "*"
+    },
     "dependencies": {
-        "react-intersection-observer": "^8.31.0",
-        "react-is": "^16.13.1"
+        "react-intersection-observer": "^8.32.2"
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29148

increased by40.28%

Dev dependency count

19

decreased by-9.52%

Number of package files

20

increased by81.82%

Lines of code

553

increased by9.72%

Dependency changes

• - Removedreact-is@^16.13.1

• - Removedreact-is@16.13.1(transitive)

• Updatedreact-intersection-observer@^8.32.2