@plasmicpkgs/react-scroll-parallax 0.0.10 → 0.0.11
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 +7 -1
- 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 +7 -1
- package/dist/react-scroll-parallax.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -145,8 +145,14 @@ var parallaxProviderMeta = {
|
|
|
145
145
|
defaultValue: {
|
|
146
146
|
type: "vbox",
|
|
147
147
|
children: [{
|
|
148
|
+
type: "text",
|
|
149
|
+
value: "Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:",
|
|
150
|
+
styles: {
|
|
151
|
+
marginBottom: "20px"
|
|
152
|
+
}
|
|
153
|
+
}, {
|
|
148
154
|
type: "component",
|
|
149
|
-
name: "
|
|
155
|
+
name: "hostless-scroll-parallax"
|
|
150
156
|
}]
|
|
151
157
|
}
|
|
152
158
|
},
|
|
@@ -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: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"
|
|
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: \"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","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);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:"
|
|
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:"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: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"
|
|
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: \"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","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","value","styles","marginBottom","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,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,6CD1BlCM,EACAG,GAEIH,EACFA,EAAOE,kBACLpD,QACAqD,EAAAA,EAA6BxC,GAG/BuC,EACEpD,QACAqD,EAAAA,EAA6BxC"}
|
|
@@ -138,8 +138,14 @@ var parallaxProviderMeta = {
|
|
|
138
138
|
defaultValue: {
|
|
139
139
|
type: "vbox",
|
|
140
140
|
children: [{
|
|
141
|
+
type: "text",
|
|
142
|
+
value: "Wrap any element in a Scroll Parallax component. Ensure they're all inside this Parallax Provider. Example:",
|
|
143
|
+
styles: {
|
|
144
|
+
marginBottom: "20px"
|
|
145
|
+
}
|
|
146
|
+
}, {
|
|
141
147
|
type: "component",
|
|
142
|
-
name: "
|
|
148
|
+
name: "hostless-scroll-parallax"
|
|
143
149
|
}]
|
|
144
150
|
}
|
|
145
151
|
},
|
|
@@ -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: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"
|
|
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: \"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","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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"}
|