From 4fac77f17c4c5ccf4cc9e1329599fdd71622923e Mon Sep 17 00:00:00 2001 From: J Smith Date: Mon, 23 Sep 2019 00:09:11 -0700 Subject: [PATCH 1/3] 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 2797719b39ea9d170db17e64d4a458472488e5e2 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 1 Oct 2019 07:49:42 +0300 Subject: [PATCH 2/3] Export context for hooks support (#76) * 2.1.3 * Export context for hooks support * useController hook * Updated README.md --- README.md | 35 +++++++++++++++++++++++++++++++-- src/components/useController.js | 14 +++++++++++++ src/index.d.ts | 8 ++++++++ src/index.js | 2 ++ 4 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 src/components/useController.js 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 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 b5c06197a..4654f202d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ // all module exports +export useController from './components/useController'; 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 23b1dfa2e60763721bdd0c678f27f4eab493e1e2 Mon Sep 17 00:00:00 2001 From: J Smith Date: Mon, 30 Sep 2019 22:02:16 -0700 Subject: [PATCH 3/3] 2.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8802e1af1..5ffa89874 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scroll-parallax", - "version": "2.1.3", + "version": "2.2.0", "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", "repository": { "type": "git",