@motionone/react - npm Package Compare versions

Comparing version 10.5.0-alpha.2 to 10.5.0-alpha.3

dist/component.cjs.js

@@ -9,2 +9,3 @@ 'use strict';
 var context = require('./context.cjs.js');
+var events = require('./utils/events.cjs.js');
 
@@ -33,3 +34,3 @@ function _interopNamespace(e) {
     function Motion(_a, externalRef) {
-        var { initial, animate, press, hover, inView, variants, style, transition, onAnimationComplete } = _a, props = tslib.__rest(_a, ["initial", "animate", "press", "hover", "inView", "variants", "style", "transition", "onAnimationComplete"]);
+        var { initial, animate, press, hover, inView, variants, style, transition, onMotionStart, onMotionComplete, onHoverStart, onHoverEnd, onPressStart, onPressEnd, onViewEnter, onViewLeave } = _a, props = tslib.__rest(_a, ["initial", "animate", "press", "hover", "inView", "variants", "style", "transition", "onMotionStart", "onMotionComplete", "onHoverStart", "onHoverEnd", "onPressStart", "onPressEnd", "onViewEnter", "onViewLeave"]);
         const options = {
@@ -43,3 +44,2 @@ initial,
             transition,
-            onAnimationComplete,
         };
@@ -51,2 +51,12 @@ const state = dom.createMotionState(options, React.useContext(context.MotionContext));
         React.useEffect(() => state.update(options));
+        events.useEvents(ref, {
+            onMotionStart,
+            onMotionComplete,
+            onHoverStart,
+            onHoverEnd,
+            onPressStart,
+            onPressEnd,
+            onViewEnter,
+            onViewLeave,
+        });
         const element = React.createElement(Component, Object.assign(Object.assign({}, props), { ref, style: Object.assign(Object.assign({}, style), initialStyle) }));
@@ -53,0 +63,0 @@ return (React__namespace.createElement(context.MotionContext.Provider, { value: state }, element));

dist/component.es.js

@@ -6,6 +6,7 @@ import { __rest } from 'tslib';
 import { MotionContext } from './context.es.js';
+import { useEvents } from './utils/events.es.js';
 
 function createMotionComponent(Component) {
     function Motion(_a, externalRef) {
-        var { initial, animate, press, hover, inView, variants, style, transition, onAnimationComplete } = _a, props = __rest(_a, ["initial", "animate", "press", "hover", "inView", "variants", "style", "transition", "onAnimationComplete"]);
+        var { initial, animate, press, hover, inView, variants, style, transition, onMotionStart, onMotionComplete, onHoverStart, onHoverEnd, onPressStart, onPressEnd, onViewEnter, onViewLeave } = _a, props = __rest(_a, ["initial", "animate", "press", "hover", "inView", "variants", "style", "transition", "onMotionStart", "onMotionComplete", "onHoverStart", "onHoverEnd", "onPressStart", "onPressEnd", "onViewEnter", "onViewLeave"]);
         const options = {
@@ -19,3 +20,2 @@ initial,
             transition,
-            onAnimationComplete,
         };
@@ -27,2 +27,12 @@ const state = createMotionState(options, useContext(MotionContext));
         useEffect(() => state.update(options));
+        useEvents(ref, {
+            onMotionStart,
+            onMotionComplete,
+            onHoverStart,
+            onHoverEnd,
+            onPressStart,
+            onPressEnd,
+            onViewEnter,
+            onViewLeave,
+        });
         const element = createElement(Component, Object.assign(Object.assign({}, props), { ref, style: Object.assign(Object.assign({}, style), initialStyle) }));
@@ -29,0 +39,0 @@ return (React.createElement(MotionContext.Provider, { value: state }, element));

lib/component.js

@@ -6,5 +6,6 @@ import { __rest } from "tslib";
 import { MotionContext } from "./context";
+import { useEvents } from "./utils/events";
 export function createMotionComponent(Component) {
     function Motion(_a, externalRef) {
-        var { initial, animate, press, hover, inView, variants, style, transition, onAnimationComplete } = _a, props = __rest(_a, ["initial", "animate", "press", "hover", "inView", "variants", "style", "transition", "onAnimationComplete"]);
+        var { initial, animate, press, hover, inView, variants, style, transition, onMotionStart, onMotionComplete, onHoverStart, onHoverEnd, onPressStart, onPressEnd, onViewEnter, onViewLeave } = _a, props = __rest(_a, ["initial", "animate", "press", "hover", "inView", "variants", "style", "transition", "onMotionStart", "onMotionComplete", "onHoverStart", "onHoverEnd", "onPressStart", "onPressEnd", "onViewEnter", "onViewLeave"]);
         const options = {
@@ -18,3 +19,2 @@ initial,
             transition,
-            onAnimationComplete,
         };
@@ -26,2 +26,12 @@ const state = createMotionState(options, useContext(MotionContext));
         useEffect(() => state.update(options));
+        useEvents(ref, {
+            onMotionStart,
+            onMotionComplete,
+            onHoverStart,
+            onHoverEnd,
+            onPressStart,
+            onPressEnd,
+            onViewEnter,
+            onViewLeave,
+        });
         const element = createElement(Component, Object.assign(Object.assign({}, props), { ref, style: Object.assign(Object.assign({}, style), initialStyle) }));
@@ -28,0 +38,0 @@ return (React.createElement(MotionContext.Provider, { value: state }, element));

package.json

 {
   "name": "@motionone/react",
-  "version": "10.5.0-alpha.2",
+  "version": "10.5.0-alpha.3",
   "description": "A tiny, performant animation library for React",
+  "license": "MIT",
   "author": "Matt Perry",
@@ -12,6 +13,7 @@ "main": "dist/index.cjs.js",
     "build": "rm -rf lib dist types && tsc -p . && rollup -c",
-    "test": "jest --coverage --config jest.config.js"
+    "test": "jest --coverage --config jest.config.js",
+    "measure": "bundlesize"
   },
   "dependencies": {
-    "@motionone/dom": "^10.5.0-alpha.2",
+    "@motionone/dom": "^10.5.0-alpha.3",
     "hey-listen": "^1.0.8",
@@ -41,3 +43,9 @@ "tslib": "^2.3.1"
   },
-  "gitHead": "46d57e4886dadbbc26c36f278ff09b2271b890b3"
+  "bundlesize": [
+    {
+      "path": "./dist/size.js",
+      "maxSize": "5 kB"
+    }
+  ],
+  "gitHead": "fcd9e7b452ccfa4270ba8fb0852a9186ff6f639e"
 }

types/component.d.ts

 import * as React from "react";
 import { Options } from "@motionone/dom";
-import type { ElementProps } from "./types";
-export declare function createMotionComponent<Props extends ElementProps>(Component: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<Options & Props> & React.RefAttributes<Element>>;
+import type { ElementProps, MotionEventHandlers } from "./types";
+export declare function createMotionComponent<Props extends ElementProps>(Component: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<Options & Props & MotionEventHandlers> & React.RefAttributes<Element>>;
 //# sourceMappingURL=component.d.ts.map

types/types.d.ts

 import type { CSSProperties, DetailedHTMLFactory, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactHTML, RefAttributes, SVGAttributes } from "react";
-import { Options } from "@motionone/dom";
+import { Options, MotionEvent, CustomPointerEvent, ViewEvent } from "@motionone/dom";
 import type { svgElements, htmlElements } from "./utils/supported-elements";
+export interface MotionEventHandlers {
+    onMotionStart?: (event: MotionEvent) => void;
+    onMotionComplete?: (event: MotionEvent) => void;
+    onHoverStart?: (event: CustomPointerEvent) => void;
+    onHoverEnd?: (event: CustomPointerEvent) => void;
+    onPressStart?: (event: CustomPointerEvent) => void;
+    onPressEnd?: (event: CustomPointerEvent) => void;
+    onViewEnter?: (event: ViewEvent) => void;
+    onViewLeave?: (event: ViewEvent) => void;
+}
 export interface ElementProps {
@@ -25,3 +35,3 @@ style: CSSProperties;
  */
-export declare type MotionHTMLProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & Options;
+export declare type MotionHTMLProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & Options & MotionEventHandlers;
 /**
@@ -41,3 +51,3 @@ * Motion-optimised versions of React's HTML components.
  */
-export interface MotionSVGProps<T> extends SVGAttributesWithoutOptions<T>, Options {
+export interface MotionSVGProps<T> extends SVGAttributesWithoutOptions<T>, Options, MotionEventHandlers {
 }
@@ -44,0 +54,0 @@ /**

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

41622

increased by82.72%

Number of package files

35

increased by25%

Lines of code

538

increased by35.86%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• Updated@motionone/dom@^10.5.0-alpha.3