From bca9efe1bc12beca54d7aaf2d84f92b2d5745b37 Mon Sep 17 00:00:00 2001 From: J Smith Date: Mon, 23 Sep 2019 00:09:11 -0700 Subject: [PATCH 1/4] 2.1.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f8bc61d4e..8802e1af1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scroll-parallax", - "version": "2.1.2", + "version": "2.1.3", "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", "repository": { "type": "git", From bc9e48a0751264a341281ed55a0bde6576f34e05 Mon Sep 17 00:00:00 2001 From: zalishchuk Date: Tue, 24 Sep 2019 04:24:36 +0300 Subject: [PATCH 2/4] Export context for hooks support --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index b5c06197a..26946d16d 100644 --- a/src/index.js +++ b/src/index.js @@ -3,3 +3,4 @@ export withController from './components/withController'; export Parallax from './components/Parallax'; export ParallaxProvider from './components/ParallaxProvider'; export ParallaxBanner from './components/ParallaxBanner'; +export ParallaxContext from './helpers/ParallaxContext'; From 96a934b68637ea5410aae115f1f6c0a197a349f7 Mon Sep 17 00:00:00 2001 From: zalishchuk Date: Tue, 24 Sep 2019 04:43:55 +0300 Subject: [PATCH 3/4] useController hook --- src/components/useController.js | 14 ++++++++++++++ src/index.d.ts | 8 ++++++++ src/index.js | 1 + 3 files changed, 23 insertions(+) create mode 100644 src/components/useController.js diff --git a/src/components/useController.js b/src/components/useController.js new file mode 100644 index 000000000..53c47dcf5 --- /dev/null +++ b/src/components/useController.js @@ -0,0 +1,14 @@ +import { useContext } from 'react'; +import ParallaxContext from '../helpers/ParallaxContext'; + +export default () => { + const parallaxController = useContext(ParallaxContext); + + if (!parallaxController) { + throw new Error( + 'Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a ' + ); + } + + return { parallaxController }; +}; diff --git a/src/index.d.ts b/src/index.d.ts index b94e845e5..1d82407fe 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -116,3 +116,11 @@ type RemoveProps = Pick>; export function withController

( Component: React.ComponentType

): React.ComponentType>; + +export interface ParallaxContextValue { + parallaxController: ParallaxController; +} + +export const ParallaxContext: React.Context; + +export function useController(): WithControllerInjectedProps; diff --git a/src/index.js b/src/index.js index 26946d16d..4654f202d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ // all module exports +export useController from './components/useController'; export withController from './components/withController'; export Parallax from './components/Parallax'; export ParallaxProvider from './components/ParallaxProvider'; From 2a702f63abd8f522227420d7490dd0d80d3a8402 Mon Sep 17 00:00:00 2001 From: zalishchuk Date: Thu, 26 Sep 2019 17:13:52 +0300 Subject: [PATCH 4/4] Updated README.md --- README.md | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ff80716ed..6c5ad03b0 100644 --- a/README.md +++ b/README.md @@ -150,7 +150,7 @@ The `layers` prop takes an array of objects that will represent each image (or c ## \ -The `` component is meant to wrap a top level component in your application and is necessary to provide access though React's context API to the parallax controller. This component should only be used once in you app, for instance in an `` component that won't be mounted/unmounted during route changes. Like so: +The `` component is meant to wrap a top level component in your application and is necessary to provide access though React context API to the parallax controller. This component should only be used once in you app, for instance in an `` component that won't be mounted/unmounted during route changes. Like so: ```jsx const AppContainer = () => ( @@ -195,6 +195,19 @@ export withController(MyComponent); ``` +Also `parallaxController` is accessible using `useController()` [React hook](https://reactjs.org/docs/hooks-intro.html) in components without writing a class or wrapping them in HOC. + +```jsx +import { useController } from 'react-scroll-parallax'; + +const MyComponent = () => { + const { parallaxController } = useController(); + // do stuff with `parallaxController` + + return

; +}; +``` + ### Available Methods Access the following methods on `parallaxController` via context: @@ -228,9 +241,27 @@ class Image extends Component { export withController(Image); ``` +If your parallax components are stuck and acting weird, this is most likely due to the fact that your page initial scroll was not at the top on load. Here's a possible solution to this problem using `useController()` hook. It can be used in your application top level component or specifically in the part of your application where you are experiencing problems. + +```jsx +const ParallaxCache = () => { + const { parallaxController } = useController(); + + useLayoutEffect(() => { + const handler = () => parallaxController.update(); + window.addEventListener('load', handler); + return () => window.removeEventListener('load', handler); + }, [parallaxController]); + + return null; +}; + +// now can be used anywhere you have problems with cached attributes +``` + ## Troubleshooting -If you're encountering issues like the parallax element jumping around or becoming stuck, there's a few likely culprits. Since this lib caches important positioning states it's posible for these to be outdated and incorrect. The most likely cause for this type of problem is the result of images loading and increasing the height of an element and/or the page. This can be fixed easily by [updating the cache](#example-usage-of-context). Another likely issue is the CSS positioning applied to the parent or parallax element itself is `fixed`. Fixed positioning parallax elements is currently not supported and may appear to work in some cases but break in others. Avoid using `position: fixed` and instead use `static`, `relative` or `absolute`, which this lib was designed to support. If none of these are relevant and you still have trouble please post an issue with your code or a demo that reproduces the problem. +If you're encountering issues like the parallax element jumping around or becoming stuck, there's a few likely culprits. Since this lib caches important positioning states it's possible for these to be outdated and incorrect. The most likely cause for this type of problem is the result of images loading and increasing the height of an element and/or the page. This can be fixed easily by [updating the cache](#example-usage-of-context). Another likely issue is the CSS positioning applied to the parent or parallax element itself is `fixed`. Fixed positioning parallax elements is currently not supported and may appear to work in some cases but break in others. Avoid using `position: fixed` and instead use `static`, `relative` or `absolute`, which this lib was designed to support. If none of these are relevant and you still have trouble please post an issue with your code or a demo that reproduces the problem. ## Browser Support