@plasmicpkgs/react-scroll-parallax 0.0.5 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ParallaxProvider.d.ts +3 -1
- package/dist/ParallaxWrapper.d.ts +3 -5
- package/dist/react-scroll-parallax.cjs.development.js +93 -35
- package/dist/react-scroll-parallax.cjs.development.js.map +1 -1
- package/dist/react-scroll-parallax.cjs.production.min.js +1 -1
- package/dist/react-scroll-parallax.cjs.production.min.js.map +1 -1
- package/dist/react-scroll-parallax.esm.js +94 -38
- package/dist/react-scroll-parallax.esm.js.map +1 -1
- package/package.json +4 -3
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
|
|
2
|
-
import
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ParallaxProviderProps } from "react-scroll-parallax/dist/components/ParallaxProvider/types";
|
|
4
|
+
export declare function ParallaxProviderWrapper({ children, ...props }: React.PropsWithChildren<ParallaxProviderProps>): JSX.Element;
|
|
3
5
|
export declare const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps>;
|
|
4
6
|
export declare function registerParallaxProvider(loader?: {
|
|
5
7
|
registerComponent: typeof registerComponent;
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
|
|
2
2
|
import React from "react";
|
|
3
3
|
export interface ParallaxWrapperProps {
|
|
4
|
-
|
|
5
|
-
xEnd?: string;
|
|
6
|
-
yStart?: string;
|
|
7
|
-
yEnd?: string;
|
|
4
|
+
speed?: number;
|
|
8
5
|
disabled?: boolean;
|
|
9
6
|
previewInEditor?: boolean;
|
|
10
7
|
children: React.ReactNode;
|
|
11
8
|
className?: string;
|
|
12
9
|
}
|
|
13
|
-
export default function ParallaxWrapper({
|
|
10
|
+
export default function ParallaxWrapper({ speed, disabled, previewInEditor, children, className, }: ParallaxWrapperProps): JSX.Element;
|
|
11
|
+
export declare const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps>;
|
|
14
12
|
export declare function registerParallaxWrapper(loader?: {
|
|
15
13
|
registerComponent: typeof registerComponent;
|
|
16
14
|
}, customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>): void;
|
|
@@ -9,16 +9,10 @@ var registerComponent = _interopDefault(require('@plasmicapp/host/registerCompon
|
|
|
9
9
|
var React = require('react');
|
|
10
10
|
var React__default = _interopDefault(React);
|
|
11
11
|
var reactScrollParallax = require('react-scroll-parallax');
|
|
12
|
+
var ResizeObserver = _interopDefault(require('resize-observer-polyfill'));
|
|
12
13
|
|
|
13
14
|
function ParallaxWrapper(_ref) {
|
|
14
|
-
var
|
|
15
|
-
xStart = _ref$xStart === void 0 ? "0" : _ref$xStart,
|
|
16
|
-
_ref$xEnd = _ref.xEnd,
|
|
17
|
-
xEnd = _ref$xEnd === void 0 ? "0" : _ref$xEnd,
|
|
18
|
-
_ref$yStart = _ref.yStart,
|
|
19
|
-
yStart = _ref$yStart === void 0 ? "0" : _ref$yStart,
|
|
20
|
-
_ref$yEnd = _ref.yEnd,
|
|
21
|
-
yEnd = _ref$yEnd === void 0 ? "0" : _ref$yEnd,
|
|
15
|
+
var speed = _ref.speed,
|
|
22
16
|
disabled = _ref.disabled,
|
|
23
17
|
previewInEditor = _ref.previewInEditor,
|
|
24
18
|
children = _ref.children,
|
|
@@ -32,14 +26,14 @@ function ParallaxWrapper(_ref) {
|
|
|
32
26
|
|
|
33
27
|
return React__default.createElement(reactScrollParallax.Parallax, {
|
|
34
28
|
disabled: disabled || inEditor && !previewInEditor,
|
|
35
|
-
|
|
36
|
-
y: [yStart, yEnd],
|
|
29
|
+
speed: speed,
|
|
37
30
|
className: className
|
|
38
31
|
}, children);
|
|
39
32
|
}
|
|
40
33
|
var parallaxWrapperMeta = {
|
|
41
|
-
name: "
|
|
34
|
+
name: "hostless-scroll-parallax",
|
|
42
35
|
displayName: "Scroll Parallax",
|
|
36
|
+
importName: "ParallaxWrapper",
|
|
43
37
|
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
44
38
|
props: {
|
|
45
39
|
children: {
|
|
@@ -52,25 +46,10 @@ var parallaxWrapperMeta = {
|
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
48
|
},
|
|
55
|
-
|
|
56
|
-
type: "
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
},
|
|
60
|
-
yEnd: {
|
|
61
|
-
type: "string",
|
|
62
|
-
defaultValue: "50%",
|
|
63
|
-
description: "The vertical offset at the end (when just scrolling out of view). Can be % or px."
|
|
64
|
-
},
|
|
65
|
-
xStart: {
|
|
66
|
-
type: "string",
|
|
67
|
-
defaultValue: "50%",
|
|
68
|
-
description: "The horizontal offset at the start (when just scrolling into view). Can be % or px."
|
|
69
|
-
},
|
|
70
|
-
xEnd: {
|
|
71
|
-
type: "string",
|
|
72
|
-
defaultValue: "-50%",
|
|
73
|
-
description: "The horizontal offset at the end (when just scrolling out of view). Can be % or px."
|
|
49
|
+
speed: {
|
|
50
|
+
type: "number",
|
|
51
|
+
description: "How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",
|
|
52
|
+
defaultValue: 20
|
|
74
53
|
},
|
|
75
54
|
disabled: {
|
|
76
55
|
type: "boolean",
|
|
@@ -93,25 +72,104 @@ function registerParallaxWrapper(loader, customParallaxWrapperMeta) {
|
|
|
93
72
|
}
|
|
94
73
|
}
|
|
95
74
|
|
|
75
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
76
|
+
if (source == null) return {};
|
|
77
|
+
var target = {};
|
|
78
|
+
var sourceKeys = Object.keys(source);
|
|
79
|
+
var key, i;
|
|
80
|
+
|
|
81
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
82
|
+
key = sourceKeys[i];
|
|
83
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
84
|
+
target[key] = source[key];
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return target;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* This is required to ensure the parallax scrolling works correctly, since if
|
|
92
|
+
* (for instance) images load after the parallax wrapper has calculated the
|
|
93
|
+
* dimensions of the space, it will result in incorrect parallax scrolling
|
|
94
|
+
* amounts.
|
|
95
|
+
*
|
|
96
|
+
* This is not great since we need to mutation-observe the whole section of the
|
|
97
|
+
* document (which may be large), but we can probably optimize this in the
|
|
98
|
+
* future.
|
|
99
|
+
*/
|
|
100
|
+
|
|
101
|
+
function ParallaxCacheUpdate(_ref) {
|
|
102
|
+
var children = _ref.children;
|
|
103
|
+
var parallaxController = reactScrollParallax.useController();
|
|
104
|
+
var ref = React.useRef(null);
|
|
105
|
+
React.useEffect(function () {
|
|
106
|
+
var _ref$current;
|
|
107
|
+
|
|
108
|
+
if ((_ref$current = ref.current) != null && _ref$current.parentElement) {
|
|
109
|
+
var targetNode = ref.current.parentElement;
|
|
110
|
+
var observer = new ResizeObserver(function () {
|
|
111
|
+
if (parallaxController) {
|
|
112
|
+
parallaxController.update();
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
observer.observe(targetNode);
|
|
116
|
+
return function () {
|
|
117
|
+
observer.disconnect();
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return function () {};
|
|
122
|
+
}, [ref.current]);
|
|
123
|
+
return React__default.createElement("div", {
|
|
124
|
+
style: {
|
|
125
|
+
display: "contents"
|
|
126
|
+
},
|
|
127
|
+
ref: ref
|
|
128
|
+
}, children);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
function ParallaxProviderWrapper(_ref2) {
|
|
132
|
+
var children = _ref2.children,
|
|
133
|
+
props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
|
|
134
|
+
|
|
135
|
+
return React__default.createElement(reactScrollParallax.ParallaxProvider, Object.assign({}, props), React__default.createElement(ParallaxCacheUpdate, null, children));
|
|
136
|
+
}
|
|
96
137
|
var parallaxProviderMeta = {
|
|
97
138
|
name: "hostless-parallax-provider",
|
|
98
139
|
displayName: "Parallax Provider",
|
|
99
|
-
importName: "
|
|
100
|
-
importPath: "react-scroll-parallax",
|
|
140
|
+
importName: "ParallaxProviderWrapper",
|
|
141
|
+
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
101
142
|
props: {
|
|
102
|
-
children:
|
|
143
|
+
children: {
|
|
144
|
+
type: "slot",
|
|
145
|
+
defaultValue: {
|
|
146
|
+
type: "vbox",
|
|
147
|
+
children: [{
|
|
148
|
+
type: "component",
|
|
149
|
+
name: "ParallaxWrapper"
|
|
150
|
+
}]
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
scrollAxis: {
|
|
154
|
+
type: "choice",
|
|
155
|
+
description: "Scroll axis for setting horizontal/vertical scrolling",
|
|
156
|
+
options: ["vertical", "horizontal"],
|
|
157
|
+
displayName: "Scroll Axis"
|
|
158
|
+
}
|
|
103
159
|
}
|
|
104
160
|
};
|
|
105
161
|
function registerParallaxProvider(loader, customParallaxProviderMeta) {
|
|
106
162
|
if (loader) {
|
|
107
|
-
loader.registerComponent(
|
|
163
|
+
loader.registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
|
|
108
164
|
} else {
|
|
109
|
-
registerComponent(
|
|
165
|
+
registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
|
|
110
166
|
}
|
|
111
167
|
}
|
|
112
168
|
|
|
169
|
+
exports.ParallaxProviderWrapper = ParallaxProviderWrapper;
|
|
113
170
|
exports.ParallaxWrapper = ParallaxWrapper;
|
|
114
171
|
exports.parallaxProviderMeta = parallaxProviderMeta;
|
|
172
|
+
exports.parallaxWrapperMeta = parallaxWrapperMeta;
|
|
115
173
|
exports.registerParallaxProvider = registerParallaxProvider;
|
|
116
174
|
exports.registerParallaxWrapper = registerParallaxWrapper;
|
|
117
175
|
//# sourceMappingURL=react-scroll-parallax.cjs.development.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-scroll-parallax.cjs.development.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n
|
|
1
|
+
{"version":3,"file":"react-scroll-parallax.cjs.development.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"ParallaxWrapper\",\n },\n ],\n },\n },\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n};\n\nexport function registerParallaxProvider(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxProviderMeta?: ComponentMeta<ParallaxProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n } else {\n registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n }\n}\n"],"names":["ParallaxWrapper","speed","disabled","previewInEditor","children","className","inEditor","useContext","PlasmicCanvasContext","hasContext","ParallaxContext","Error","React","Parallax","parallaxWrapperMeta","name","displayName","importName","importPath","props","type","defaultValue","src","style","maxWidth","description","defaultStyles","registerParallaxWrapper","loader","customParallaxWrapperMeta","registerComponent","ParallaxCacheUpdate","parallaxController","useController","ref","useRef","useEffect","current","parentElement","targetNode","observer","ResizeObserver","update","observe","disconnect","display","ParallaxProviderWrapper","ParallaxProvider","parallaxProviderMeta","scrollAxis","options","registerParallaxProvider","customParallaxProviderMeta"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("@plasmicapp/host"),a=e(require("@plasmicapp/host/registerComponent")),l=require("react"),t=e(l),n=require("react-scroll-parallax"),o=e(require("resize-observer-polyfill"));function i(e){var a=e.speed,o=e.disabled,i=e.previewInEditor,s=e.children,p=e.className,c=l.useContext(r.PlasmicCanvasContext);if(null==l.useContext(n.ParallaxContext))throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");return t.createElement(n.Parallax,{disabled:o||c&&!i,speed:a,className:p},s)}var s={name:"hostless-scroll-parallax",displayName:"Scroll Parallax",importName:"ParallaxWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},speed:{type:"number",description:"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",defaultValue:20},disabled:{type:"boolean",description:"Disables the parallax effect."},previewInEditor:{type:"boolean",description:"Enable the parallax effect in the editor."}},defaultStyles:{maxWidth:"100%"}};function p(e){var r=e.children,a=n.useController(),i=l.useRef(null);return l.useEffect((function(){var e;if(null!=(e=i.current)&&e.parentElement){var r=i.current.parentElement,l=new o((function(){a&&a.update()}));return l.observe(r),function(){l.disconnect()}}return function(){}}),[i.current]),t.createElement("div",{style:{display:"contents"},ref:i},r)}function c(e){var r=e.children,a=function(e,r){if(null==e)return{};var a,l,t={},n=Object.keys(e);for(l=0;l<n.length;l++)r.indexOf(a=n[l])>=0||(t[a]=e[a]);return t}(e,["children"]);return t.createElement(n.ParallaxProvider,Object.assign({},a),t.createElement(p,null,r))}var u={name:"hostless-parallax-provider",displayName:"Parallax Provider",importName:"ParallaxProviderWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"vbox",children:[{type:"component",name:"ParallaxWrapper"}]}},scrollAxis:{type:"choice",description:"Scroll axis for setting horizontal/vertical scrolling",options:["vertical","horizontal"],displayName:"Scroll Axis"}}};exports.ParallaxProviderWrapper=c,exports.ParallaxWrapper=i,exports.parallaxProviderMeta=u,exports.parallaxWrapperMeta=s,exports.registerParallaxProvider=function(e,r){e?e.registerComponent(c,null!=r?r:u):a(c,null!=r?r:u)},exports.registerParallaxWrapper=function(e,r){e?e.registerComponent(i,null!=r?r:s):a(i,null!=r?r:s)};
|
|
2
2
|
//# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-scroll-parallax.cjs.production.min.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n
|
|
1
|
+
{"version":3,"file":"react-scroll-parallax.cjs.production.min.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"ParallaxWrapper\",\n },\n ],\n },\n },\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n};\n\nexport function registerParallaxProvider(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxProviderMeta?: ComponentMeta<ParallaxProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n } else {\n registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n }\n}\n"],"names":["ParallaxWrapper","speed","disabled","previewInEditor","children","className","inEditor","useContext","PlasmicCanvasContext","ParallaxContext","Error","React","Parallax","parallaxWrapperMeta","name","displayName","importName","importPath","props","type","defaultValue","src","style","maxWidth","description","defaultStyles","ParallaxCacheUpdate","parallaxController","useController","ref","useRef","useEffect","current","_ref$current","parentElement","targetNode","observer","ResizeObserver","update","observe","disconnect","display","ParallaxProviderWrapper","ParallaxProvider","parallaxProviderMeta","scrollAxis","options","loader","customParallaxProviderMeta","registerComponent","customParallaxWrapperMeta"],"mappings":"8UAewBA,SACtBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,gBACAC,IAAAA,SACAC,IAAAA,UAEMC,EAAWC,aAAWC,2BACsB,MAA/BD,aAAWE,yBAEtB,IAAIC,MACR,0FAIFC,gBAACC,YACCV,SAAUA,GAAaI,IAAaH,EACpCF,MAAOA,EACPI,UAAWA,GAEVD,OAKMS,EAA2D,CACtEC,KAAM,2BACNC,YAAa,kBACbC,WAAY,kBACZC,WAAY,qCACZC,MAAO,CACLd,SAAU,CACRe,KAAM,OACNC,aAAc,CACZD,KAAM,MACNE,IAAK,kCACLC,MAAO,CACLC,SAAU,UAIhBtB,MAAO,CACLkB,KAAM,SACNK,YACE,qGACFJ,aAAc,IAEhBlB,SAAU,CACRiB,KAAM,UACNK,YAAa,iCAEfrB,gBAAiB,CACfgB,KAAM,UACNK,YAAa,8CAGjBC,cAAe,CACbF,SAAU,SCtDd,SAASG,SAAsBtB,IAAAA,SACvBuB,EAAqBC,kBACrBC,EAAMC,SAA8B,aAE1CC,aAAU,6BACJF,EAAIG,UAAJC,EAAaC,cAAe,KACxBC,EAAaN,EAAIG,QAAQE,cACzBE,EAAW,IAAIC,GAAe,WAC9BV,GACFA,EAAmBW,mBAGvBF,EAASG,QAAQJ,GACV,WACLC,EAASI,qBAGN,eACN,CAACX,EAAIG,UAGNrB,uBAAKW,MAAO,CAAEmB,QAAS,YAAcZ,IAAKA,GACvCzB,YAKSsC,SACdtC,IAAAA,SACGc,4JAGDP,gBAACgC,oCAAqBzB,GACpBP,gBAACe,OAAqBtB,IAK5B,IAAawC,EAA6D,CACxE9B,KAAM,6BACNC,YAAa,oBACbC,WAAY,0BACZC,WAAY,qCACZC,MAAO,CACLd,SAAU,CACRe,KAAM,OACNC,aAAc,CACZD,KAAM,OACNf,SAAU,CACR,CACEe,KAAM,YACNL,KAAM,sBAKd+B,WAAY,CACV1B,KAAM,SACNK,YAAa,wDACbsB,QAAS,CAAC,WAAY,cACtB/B,YAAa,oLAMjBgC,EACAC,GAEID,EACFA,EAAOE,kBACLP,QACAM,EAAAA,EAA8BJ,GAGhCK,EACEP,QACAM,EAAAA,EAA8BJ,6CDlBlCG,EACAG,GAEIH,EACFA,EAAOE,kBACLjD,QACAkD,EAAAA,EAA6BrC,GAG/BoC,EACEjD,QACAkD,EAAAA,EAA6BrC"}
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import { PlasmicCanvasContext } from '@plasmicapp/host';
|
|
2
2
|
import registerComponent from '@plasmicapp/host/registerComponent';
|
|
3
|
-
import React, { useContext } from 'react';
|
|
4
|
-
import { ParallaxContext, Parallax, ParallaxProvider } from 'react-scroll-parallax';
|
|
3
|
+
import React, { useContext, useRef, useEffect } from 'react';
|
|
4
|
+
import { ParallaxContext, Parallax, ParallaxProvider, useController } from 'react-scroll-parallax';
|
|
5
|
+
import ResizeObserver from 'resize-observer-polyfill';
|
|
5
6
|
|
|
6
7
|
function ParallaxWrapper(_ref) {
|
|
7
|
-
var
|
|
8
|
-
xStart = _ref$xStart === void 0 ? "0" : _ref$xStart,
|
|
9
|
-
_ref$xEnd = _ref.xEnd,
|
|
10
|
-
xEnd = _ref$xEnd === void 0 ? "0" : _ref$xEnd,
|
|
11
|
-
_ref$yStart = _ref.yStart,
|
|
12
|
-
yStart = _ref$yStart === void 0 ? "0" : _ref$yStart,
|
|
13
|
-
_ref$yEnd = _ref.yEnd,
|
|
14
|
-
yEnd = _ref$yEnd === void 0 ? "0" : _ref$yEnd,
|
|
8
|
+
var speed = _ref.speed,
|
|
15
9
|
disabled = _ref.disabled,
|
|
16
10
|
previewInEditor = _ref.previewInEditor,
|
|
17
11
|
children = _ref.children,
|
|
@@ -25,14 +19,14 @@ function ParallaxWrapper(_ref) {
|
|
|
25
19
|
|
|
26
20
|
return React.createElement(Parallax, {
|
|
27
21
|
disabled: disabled || inEditor && !previewInEditor,
|
|
28
|
-
|
|
29
|
-
y: [yStart, yEnd],
|
|
22
|
+
speed: speed,
|
|
30
23
|
className: className
|
|
31
24
|
}, children);
|
|
32
25
|
}
|
|
33
26
|
var parallaxWrapperMeta = {
|
|
34
|
-
name: "
|
|
27
|
+
name: "hostless-scroll-parallax",
|
|
35
28
|
displayName: "Scroll Parallax",
|
|
29
|
+
importName: "ParallaxWrapper",
|
|
36
30
|
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
37
31
|
props: {
|
|
38
32
|
children: {
|
|
@@ -45,25 +39,10 @@ var parallaxWrapperMeta = {
|
|
|
45
39
|
}
|
|
46
40
|
}
|
|
47
41
|
},
|
|
48
|
-
|
|
49
|
-
type: "
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
},
|
|
53
|
-
yEnd: {
|
|
54
|
-
type: "string",
|
|
55
|
-
defaultValue: "50%",
|
|
56
|
-
description: "The vertical offset at the end (when just scrolling out of view). Can be % or px."
|
|
57
|
-
},
|
|
58
|
-
xStart: {
|
|
59
|
-
type: "string",
|
|
60
|
-
defaultValue: "50%",
|
|
61
|
-
description: "The horizontal offset at the start (when just scrolling into view). Can be % or px."
|
|
62
|
-
},
|
|
63
|
-
xEnd: {
|
|
64
|
-
type: "string",
|
|
65
|
-
defaultValue: "-50%",
|
|
66
|
-
description: "The horizontal offset at the end (when just scrolling out of view). Can be % or px."
|
|
42
|
+
speed: {
|
|
43
|
+
type: "number",
|
|
44
|
+
description: "How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",
|
|
45
|
+
defaultValue: 20
|
|
67
46
|
},
|
|
68
47
|
disabled: {
|
|
69
48
|
type: "boolean",
|
|
@@ -86,22 +65,99 @@ function registerParallaxWrapper(loader, customParallaxWrapperMeta) {
|
|
|
86
65
|
}
|
|
87
66
|
}
|
|
88
67
|
|
|
68
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
69
|
+
if (source == null) return {};
|
|
70
|
+
var target = {};
|
|
71
|
+
var sourceKeys = Object.keys(source);
|
|
72
|
+
var key, i;
|
|
73
|
+
|
|
74
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
75
|
+
key = sourceKeys[i];
|
|
76
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
77
|
+
target[key] = source[key];
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return target;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* This is required to ensure the parallax scrolling works correctly, since if
|
|
85
|
+
* (for instance) images load after the parallax wrapper has calculated the
|
|
86
|
+
* dimensions of the space, it will result in incorrect parallax scrolling
|
|
87
|
+
* amounts.
|
|
88
|
+
*
|
|
89
|
+
* This is not great since we need to mutation-observe the whole section of the
|
|
90
|
+
* document (which may be large), but we can probably optimize this in the
|
|
91
|
+
* future.
|
|
92
|
+
*/
|
|
93
|
+
|
|
94
|
+
function ParallaxCacheUpdate(_ref) {
|
|
95
|
+
var children = _ref.children;
|
|
96
|
+
var parallaxController = useController();
|
|
97
|
+
var ref = useRef(null);
|
|
98
|
+
useEffect(function () {
|
|
99
|
+
var _ref$current;
|
|
100
|
+
|
|
101
|
+
if ((_ref$current = ref.current) != null && _ref$current.parentElement) {
|
|
102
|
+
var targetNode = ref.current.parentElement;
|
|
103
|
+
var observer = new ResizeObserver(function () {
|
|
104
|
+
if (parallaxController) {
|
|
105
|
+
parallaxController.update();
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
observer.observe(targetNode);
|
|
109
|
+
return function () {
|
|
110
|
+
observer.disconnect();
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
return function () {};
|
|
115
|
+
}, [ref.current]);
|
|
116
|
+
return React.createElement("div", {
|
|
117
|
+
style: {
|
|
118
|
+
display: "contents"
|
|
119
|
+
},
|
|
120
|
+
ref: ref
|
|
121
|
+
}, children);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function ParallaxProviderWrapper(_ref2) {
|
|
125
|
+
var children = _ref2.children,
|
|
126
|
+
props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
|
|
127
|
+
|
|
128
|
+
return React.createElement(ParallaxProvider, Object.assign({}, props), React.createElement(ParallaxCacheUpdate, null, children));
|
|
129
|
+
}
|
|
89
130
|
var parallaxProviderMeta = {
|
|
90
131
|
name: "hostless-parallax-provider",
|
|
91
132
|
displayName: "Parallax Provider",
|
|
92
|
-
importName: "
|
|
93
|
-
importPath: "react-scroll-parallax",
|
|
133
|
+
importName: "ParallaxProviderWrapper",
|
|
134
|
+
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
94
135
|
props: {
|
|
95
|
-
children:
|
|
136
|
+
children: {
|
|
137
|
+
type: "slot",
|
|
138
|
+
defaultValue: {
|
|
139
|
+
type: "vbox",
|
|
140
|
+
children: [{
|
|
141
|
+
type: "component",
|
|
142
|
+
name: "ParallaxWrapper"
|
|
143
|
+
}]
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
scrollAxis: {
|
|
147
|
+
type: "choice",
|
|
148
|
+
description: "Scroll axis for setting horizontal/vertical scrolling",
|
|
149
|
+
options: ["vertical", "horizontal"],
|
|
150
|
+
displayName: "Scroll Axis"
|
|
151
|
+
}
|
|
96
152
|
}
|
|
97
153
|
};
|
|
98
154
|
function registerParallaxProvider(loader, customParallaxProviderMeta) {
|
|
99
155
|
if (loader) {
|
|
100
|
-
loader.registerComponent(
|
|
156
|
+
loader.registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
|
|
101
157
|
} else {
|
|
102
|
-
registerComponent(
|
|
158
|
+
registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
|
|
103
159
|
}
|
|
104
160
|
}
|
|
105
161
|
|
|
106
|
-
export { ParallaxWrapper, parallaxProviderMeta, registerParallaxProvider, registerParallaxWrapper };
|
|
162
|
+
export { ParallaxProviderWrapper, ParallaxWrapper, parallaxProviderMeta, parallaxWrapperMeta, registerParallaxProvider, registerParallaxWrapper };
|
|
107
163
|
//# sourceMappingURL=react-scroll-parallax.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-scroll-parallax.esm.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n
|
|
1
|
+
{"version":3,"file":"react-scroll-parallax.esm.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"ParallaxWrapper\",\n },\n ],\n },\n },\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n};\n\nexport function registerParallaxProvider(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxProviderMeta?: ComponentMeta<ParallaxProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n } else {\n registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n }\n}\n"],"names":["ParallaxWrapper","speed","disabled","previewInEditor","children","className","inEditor","useContext","PlasmicCanvasContext","hasContext","ParallaxContext","Error","React","Parallax","parallaxWrapperMeta","name","displayName","importName","importPath","props","type","defaultValue","src","style","maxWidth","description","defaultStyles","registerParallaxWrapper","loader","customParallaxWrapperMeta","registerComponent","ParallaxCacheUpdate","parallaxController","useController","ref","useRef","useEffect","current","parentElement","targetNode","observer","ResizeObserver","update","observe","disconnect","display","ParallaxProviderWrapper","ParallaxProvider","parallaxProviderMeta","scrollAxis","options","registerParallaxProvider","customParallaxProviderMeta"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-scroll-parallax",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"description": "Plasmic registration call for the HTML5 video element",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -36,8 +36,9 @@
|
|
|
36
36
|
"typescript": "^3.9.7"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@plasmicapp/host": "^0.0
|
|
40
|
-
"react-scroll-parallax": "
|
|
39
|
+
"@plasmicapp/host": "^1.0.0",
|
|
40
|
+
"react-scroll-parallax": "3.0.0-alpha.14",
|
|
41
|
+
"resize-observer-polyfill": "^1.5.1"
|
|
41
42
|
},
|
|
42
43
|
"peerDependencies": {
|
|
43
44
|
"react": ">=16.8.0",
|