@react-spring/parallax - npm Package Compare versions

Comparing version 9.0.0-canary.808.5.5cdf687 to 9.0.0-canary.808.6.a1d7e01

index.cjs.js

@@ -11,5 +11,5 @@ 'use strict';
 var React__default = _interopDefault(React);
-var globals = require('@react-spring/shared/globals');
 var web = require('@react-spring/web/index.cjs.js');
 var useMemoOne = require('use-memo-one');
+var globals = require('@react-spring/shared/globals');
 var shared = require('@react-spring/shared');
@@ -25,3 +25,3 @@
 var START_TRANSLATE = 'translate(0px,0px)';
-var ParallaxLayer = React__default.memo(function (_ref) {
+var ParallaxLayer = React__default.memo(React__default.forwardRef(function (_ref, ref) {
   var _extends2;
@@ -77,3 +77,6 @@
     };
-  }, []); // Register the layer with our parent.
+  }, []);
+  React__default.useImperativeHandle(ref, function () {
+    return layer;
+  }); // Register the layer with our parent.
 
@@ -101,7 +104,7 @@ shared.useOnce(function () {
       willChange: 'transform'
-    }, _extends2[horizontal ? 'height' : 'width'] = '100%', _extends2[horizontal ? 'width' : 'height'] = ctrl.get('space'), _extends2.transform = translate3d, _extends2), rest.style)
+    }, _extends2[horizontal ? 'height' : 'width'] = '100%', _extends2[horizontal ? 'width' : 'height'] = ctrl.get('space'), _extends2.WebkitTransform = translate3d, _extends2.msTransform = translate3d, _extends2.transform = translate3d, _extends2), rest.style)
   }));
   return null;
-});
-var Parallax = React__default.memo(function (_ref2) {
+}));
+var Parallax = React__default.memo(React__default.forwardRef(function (_ref2, ref) {
   var _extends3;
@@ -123,4 +126,3 @@
 
-  var state;
-  state = useMemoOne.useMemoOne(function () {
+  var state = useMemoOne.useMemoOne(function () {
     return {
@@ -150,2 +152,5 @@ config: config,
   }, [config]);
+  React__default.useImperativeHandle(ref, function () {
+    return state;
+  });
   var containerRef = React.useRef();
@@ -228,7 +233,7 @@ var contentRef = React.useRef();
   var overflow = enabled ? 'scroll' : 'hidden';
-  return React__default.createElement(globals.defaultElement, Object.assign({}, rest, {
+  return React__default.createElement(web.a.div, Object.assign({}, rest, {
     ref: containerRef,
     onScroll: onScroll,
-    onWheel: enabled ? state.stop : null,
-    onTouchStart: enabled ? state.stop : null,
+    onWheel: enabled ? state.stop : undefined,
+    onTouchStart: enabled ? state.stop : undefined,
     style: _extends({
@@ -243,6 +248,6 @@ position: 'absolute',
       WebkitTransform: START_TRANSLATE,
-      MsTransform: START_TRANSLATE,
+      msTransform: START_TRANSLATE,
       transform: START_TRANSLATE_3D
     }, rest.style)
-  }), ready && React__default.createElement(globals.defaultElement, {
+  }), ready && React__default.createElement(web.a.div, {
     ref: contentRef,
@@ -252,7 +257,7 @@ style: _extends((_extends3 = {
       position: 'absolute'
-    }, _extends3[horizontal ? 'height' : 'width'] = '100%', _extends3[horizontal ? 'width' : 'height'] = state.space * pages, _extends3.WebkitTransform = START_TRANSLATE, _extends3.MsTransform = START_TRANSLATE, _extends3.transform = START_TRANSLATE_3D, _extends3), innerStyle)
+    }, _extends3[horizontal ? 'height' : 'width'] = '100%', _extends3[horizontal ? 'width' : 'height'] = state.space * pages, _extends3.WebkitTransform = START_TRANSLATE, _extends3.msTransform = START_TRANSLATE, _extends3.transform = START_TRANSLATE_3D, _extends3), innerStyle)
   }, React__default.createElement(ParentContext.Provider, {
     value: state
   }, rest.children)));
-});
+}));
 
@@ -259,0 +264,0 @@ exports.Parallax = Parallax;

index.d.ts

@@ -32,3 +32,3 @@ import React, { CSSProperties } from 'react';
 }
-declare const ParallaxLayer: React.MemoExoticComponent<({ horizontal, factor, offset, speed, ...rest }: ParallaxLayerProps) => JSX.Element | null>;
+declare const ParallaxLayer: React.MemoExoticComponent<React.ForwardRefExoticComponent<ParallaxLayerProps & React.RefAttributes<IParallaxLayer>>>;
 declare type ConfigProp = SpringConfig | ((key: string) => SpringConfig);
@@ -43,4 +43,4 @@ interface ParallaxProps extends ViewProps {
 }
-declare const Parallax: React.MemoExoticComponent<({ pages, config, enabled, horizontal, innerStyle, ...rest }: ParallaxProps) => JSX.Element>;
+declare const Parallax: React.MemoExoticComponent<React.ForwardRefExoticComponent<ParallaxProps & React.RefAttributes<IParallax>>>;
 
 export { IParallax, IParallaxLayer, Parallax, ParallaxLayer, ParallaxLayerProps, ParallaxProps };

index.js

 import _extends from '@babel/runtime/helpers/esm/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 import React, { useContext, useState, useEffect, useRef } from 'react';
-import { defaultElement, frameLoop } from '@react-spring/shared/globals';
 import { Controller, a, config } from '@react-spring/web';
 import { useMemoOne } from 'use-memo-one';
+import { frameLoop } from '@react-spring/shared/globals';
 import { useOnce } from '@react-spring/shared';
@@ -17,3 +17,3 @@
 const START_TRANSLATE = 'translate(0px,0px)';
-const ParallaxLayer = React.memo((_ref) => {
+const ParallaxLayer = React.memo(React.forwardRef((_ref, ref) => {
   let {
@@ -58,3 +58,4 @@ horizontal,
 
-  }), []); // Register the layer with our parent.
+  }), []);
+  React.useImperativeHandle(ref, () => layer); // Register the layer with our parent.
 
@@ -80,2 +81,4 @@ useOnce(() => {
       [horizontal ? 'width' : 'height']: ctrl.get('space'),
+      WebkitTransform: translate3d,
+      msTransform: translate3d,
       transform: translate3d
@@ -85,4 +88,4 @@ }, rest.style)
   return null;
-});
-const Parallax = React.memo((_ref2) => {
+}));
+const Parallax = React.memo(React.forwardRef((_ref2, ref) => {
   let {
@@ -97,4 +100,3 @@ pages,
   const [ready, setReady] = useState(false);
-  let state;
-  state = useMemoOne(() => ({
+  const state = useMemoOne(() => ({
     config: config$1,
@@ -116,2 +118,3 @@ busy: false,
   }, [config$1]);
+  React.useImperativeHandle(ref, () => state);
   const containerRef = useRef();
@@ -189,7 +192,7 @@ const contentRef = useRef();
   const overflow = enabled ? 'scroll' : 'hidden';
-  return React.createElement(defaultElement, Object.assign({}, rest, {
+  return React.createElement(a.div, Object.assign({}, rest, {
     ref: containerRef,
     onScroll: onScroll,
-    onWheel: enabled ? state.stop : null,
-    onTouchStart: enabled ? state.stop : null,
+    onWheel: enabled ? state.stop : undefined,
+    onTouchStart: enabled ? state.stop : undefined,
     style: _extends({
@@ -204,6 +207,6 @@ position: 'absolute',
       WebkitTransform: START_TRANSLATE,
-      MsTransform: START_TRANSLATE,
+      msTransform: START_TRANSLATE,
       transform: START_TRANSLATE_3D
     }, rest.style)
-  }), ready && React.createElement(defaultElement, {
+  }), ready && React.createElement(a.div, {
     ref: contentRef,
@@ -216,3 +219,3 @@ style: _extends({
       WebkitTransform: START_TRANSLATE,
-      MsTransform: START_TRANSLATE,
+      msTransform: START_TRANSLATE,
       transform: START_TRANSLATE_3D
@@ -223,5 +226,5 @@ }, innerStyle)
   }, rest.children)));
-});
+}));
 
 export { Parallax, ParallaxLayer };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@react-spring/parallax",
-  "version": "9.0.0-canary.808.5.5cdf687",
+  "version": "9.0.0-canary.808.6.a1d7e01",
   "description": "Cross-platform animation engine for React",
@@ -31,4 +31,4 @@ "keywords": [
     "@babel/runtime": "^7.3.1",
-    "@react-spring/shared": "9.0.0-canary.808.5.5cdf687",
-    "@react-spring/web": "9.0.0-canary.808.5.5cdf687",
+    "@react-spring/shared": "9.0.0-canary.808.6.a1d7e01",
+    "@react-spring/web": "9.0.0-canary.808.6.a1d7e01",
     "use-memo-one": "^1.1.0"
@@ -35,0 +35,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

43207

increased by4.09%

Lines of code

735

increased by1.66%

Dependency changes

• + Added@react-spring/animated@9.0.0-canary.808.6.a1d7e01(transitive)

• + Added@react-spring/core@9.0.0-canary.808.6.a1d7e01(transitive)

• + Added@react-spring/shared@9.0.0-canary.808.6.a1d7e01(transitive)

• + Added@react-spring/web@9.0.0-canary.808.6.a1d7e01(transitive)

• - Removed@react-spring/animated@9.0.0-canary.808.5.5cdf687(transitive)

• - Removed@react-spring/core@9.0.0-canary.808.5.5cdf687(transitive)

• - Removed@react-spring/shared@9.0.0-canary.808.5.5cdf687(transitive)

• - Removed@react-spring/web@9.0.0-canary.808.5.5cdf687(transitive)

• Updated@react-spring/shared@9.0.0-canary.808.6.a1d7e01

• Updated@react-spring/web@9.0.0-canary.808.6.a1d7e01