@plasmicpkgs/react-scroll-parallax 0.0.8 → 0.0.12
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/react-scroll-parallax.cjs.development.js +19 -4
- 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 +19 -4
- package/dist/react-scroll-parallax.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -19,8 +19,9 @@ function ParallaxWrapper(_ref) {
|
|
|
19
19
|
className = _ref.className;
|
|
20
20
|
var inEditor = React.useContext(host.PlasmicCanvasContext);
|
|
21
21
|
var hasContext = React.useContext(reactScrollParallax.ParallaxContext) != null;
|
|
22
|
+
var isServer = typeof window === "undefined";
|
|
22
23
|
|
|
23
|
-
if (!hasContext) {
|
|
24
|
+
if (!hasContext && !isServer) {
|
|
24
25
|
throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");
|
|
25
26
|
}
|
|
26
27
|
|
|
@@ -140,15 +141,29 @@ var parallaxProviderMeta = {
|
|
|
140
141
|
importName: "ParallaxProviderWrapper",
|
|
141
142
|
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
142
143
|
props: {
|
|
143
|
-
children:
|
|
144
|
+
children: {
|
|
145
|
+
type: "slot",
|
|
146
|
+
defaultValue: {
|
|
147
|
+
type: "vbox",
|
|
148
|
+
children: [{
|
|
149
|
+
type: "text",
|
|
150
|
+
value: "Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:",
|
|
151
|
+
styles: {
|
|
152
|
+
marginBottom: "20px"
|
|
153
|
+
}
|
|
154
|
+
}, {
|
|
155
|
+
type: "component",
|
|
156
|
+
name: "hostless-scroll-parallax"
|
|
157
|
+
}]
|
|
158
|
+
}
|
|
159
|
+
},
|
|
144
160
|
scrollAxis: {
|
|
145
161
|
type: "choice",
|
|
146
162
|
description: "Scroll axis for setting horizontal/vertical scrolling",
|
|
147
163
|
options: ["vertical", "horizontal"],
|
|
148
164
|
displayName: "Scroll Axis"
|
|
149
165
|
}
|
|
150
|
-
}
|
|
151
|
-
parentComponentName: "hostless-scroll-parallax"
|
|
166
|
+
}
|
|
152
167
|
};
|
|
153
168
|
function registerParallaxProvider(loader, customParallaxProviderMeta) {
|
|
154
169
|
if (loader) {
|
|
@@ -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 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: \"slot\",\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
|
|
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 const isServer = typeof window === \"undefined\";\n if (!hasContext && !isServer) {\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: \"text\",\n value:\n \"Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:\",\n styles: {\n marginBottom: \"20px\",\n },\n },\n {\n type: \"component\",\n name: \"hostless-scroll-parallax\",\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","isServer","window","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","value","styles","marginBottom","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 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)
|
|
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),u=null!=l.useContext(n.ParallaxContext),d="undefined"==typeof window;if(!u&&!d)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:"text",value:"Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:",styles:{marginBottom:"20px"}},{type:"component",name:"hostless-scroll-parallax"}]}},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 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: \"slot\",\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
|
|
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 const isServer = typeof window === \"undefined\";\n if (!hasContext && !isServer) {\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: \"text\",\n value:\n \"Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:\",\n styles: {\n marginBottom: \"20px\",\n },\n },\n {\n type: \"component\",\n name: \"hostless-scroll-parallax\",\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","isServer","window","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","value","styles","marginBottom","scrollAxis","options","loader","customParallaxProviderMeta","registerComponent","customParallaxWrapperMeta"],"mappings":"8UAewBA,SACtBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,gBACAC,IAAAA,SACAC,IAAAA,UAEMC,EAAWC,aAAWC,wBACtBC,EAA4C,MAA/BF,aAAWG,mBACxBC,EAA6B,oBAAXC,WACnBH,IAAeE,QACZ,IAAIE,MACR,0FAIFC,gBAACC,YACCb,SAAUA,GAAaI,IAAaH,EACpCF,MAAOA,EACPI,UAAWA,GAEVD,OAKMY,EAA2D,CACtEC,KAAM,2BACNC,YAAa,kBACbC,WAAY,kBACZC,WAAY,qCACZC,MAAO,CACLjB,SAAU,CACRkB,KAAM,OACNC,aAAc,CACZD,KAAM,MACNE,IAAK,kCACLC,MAAO,CACLC,SAAU,UAIhBzB,MAAO,CACLqB,KAAM,SACNK,YACE,qGACFJ,aAAc,IAEhBrB,SAAU,CACRoB,KAAM,UACNK,YAAa,iCAEfxB,gBAAiB,CACfmB,KAAM,UACNK,YAAa,8CAGjBC,cAAe,CACbF,SAAU,SCvDd,SAASG,SAAsBzB,IAAAA,SACvB0B,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,GACvC5B,YAKSyC,SACdzC,IAAAA,SACGiB,4JAGDP,gBAACgC,oCAAqBzB,GACpBP,gBAACe,OAAqBzB,IAK5B,IAAa2C,EAA6D,CACxE9B,KAAM,6BACNC,YAAa,oBACbC,WAAY,0BACZC,WAAY,qCACZC,MAAO,CACLjB,SAAU,CACRkB,KAAM,OACNC,aAAc,CACZD,KAAM,OACNlB,SAAU,CACR,CACEkB,KAAM,OACN0B,MACE,8GACFC,OAAQ,CACNC,aAAc,SAGlB,CACE5B,KAAM,YACNL,KAAM,+BAKdkC,WAAY,CACV7B,KAAM,SACNK,YAAa,wDACbyB,QAAS,CAAC,WAAY,cACtBlC,YAAa,oLAMjBmC,EACAC,GAEID,EACFA,EAAOE,kBACLV,QACAS,EAAAA,EAA8BP,GAGhCQ,EACEV,QACAS,EAAAA,EAA8BP,6CDzBlCM,EACAG,GAEIH,EACFA,EAAOE,kBACLvD,QACAwD,EAAAA,EAA6BxC,GAG/BuC,EACEvD,QACAwD,EAAAA,EAA6BxC"}
|
|
@@ -12,8 +12,9 @@ function ParallaxWrapper(_ref) {
|
|
|
12
12
|
className = _ref.className;
|
|
13
13
|
var inEditor = useContext(PlasmicCanvasContext);
|
|
14
14
|
var hasContext = useContext(ParallaxContext) != null;
|
|
15
|
+
var isServer = typeof window === "undefined";
|
|
15
16
|
|
|
16
|
-
if (!hasContext) {
|
|
17
|
+
if (!hasContext && !isServer) {
|
|
17
18
|
throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");
|
|
18
19
|
}
|
|
19
20
|
|
|
@@ -133,15 +134,29 @@ var parallaxProviderMeta = {
|
|
|
133
134
|
importName: "ParallaxProviderWrapper",
|
|
134
135
|
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
135
136
|
props: {
|
|
136
|
-
children:
|
|
137
|
+
children: {
|
|
138
|
+
type: "slot",
|
|
139
|
+
defaultValue: {
|
|
140
|
+
type: "vbox",
|
|
141
|
+
children: [{
|
|
142
|
+
type: "text",
|
|
143
|
+
value: "Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:",
|
|
144
|
+
styles: {
|
|
145
|
+
marginBottom: "20px"
|
|
146
|
+
}
|
|
147
|
+
}, {
|
|
148
|
+
type: "component",
|
|
149
|
+
name: "hostless-scroll-parallax"
|
|
150
|
+
}]
|
|
151
|
+
}
|
|
152
|
+
},
|
|
137
153
|
scrollAxis: {
|
|
138
154
|
type: "choice",
|
|
139
155
|
description: "Scroll axis for setting horizontal/vertical scrolling",
|
|
140
156
|
options: ["vertical", "horizontal"],
|
|
141
157
|
displayName: "Scroll Axis"
|
|
142
158
|
}
|
|
143
|
-
}
|
|
144
|
-
parentComponentName: "hostless-scroll-parallax"
|
|
159
|
+
}
|
|
145
160
|
};
|
|
146
161
|
function registerParallaxProvider(loader, customParallaxProviderMeta) {
|
|
147
162
|
if (loader) {
|
|
@@ -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 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: \"slot\",\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
|
|
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 const isServer = typeof window === \"undefined\";\n if (!hasContext && !isServer) {\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: \"text\",\n value:\n \"Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:\",\n styles: {\n marginBottom: \"20px\",\n },\n },\n {\n type: \"component\",\n name: \"hostless-scroll-parallax\",\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","isServer","window","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","value","styles","marginBottom","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.12",
|
|
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,11 +36,11 @@
|
|
|
36
36
|
"typescript": "^3.9.7"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@plasmicapp/host": "^0.0.50",
|
|
40
39
|
"react-scroll-parallax": "3.0.0-alpha.14",
|
|
41
40
|
"resize-observer-polyfill": "^1.5.1"
|
|
42
41
|
},
|
|
43
42
|
"peerDependencies": {
|
|
43
|
+
"@plasmicapp/host": "^1.0.0",
|
|
44
44
|
"react": ">=16.8.0",
|
|
45
45
|
"react-dom": ">=16.8.0"
|
|
46
46
|
}
|