react-scroll-parallax - npm Package Compare versions

Comparing version 2.1.3 to 2.2.0

cjs/index.d.ts

@@ -119,1 +119,9 @@ import * as React from 'react';
 ): React.ComponentType<RemoveProps<P, 'parallaxController'>>;
+
+export interface ParallaxContextValue {
+    parallaxController: ParallaxController;
+}
+
+export const ParallaxContext: React.Context<ParallaxContextValue>;
+
+export function useController(): WithControllerInjectedProps;

cjs/index.js

@@ -6,2 +6,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useController", {
+  enumerable: true,
+  get: function get() {
+    return _useController2.default;
+  }
+});
 Object.defineProperty(exports, "withController", {
@@ -31,3 +37,11 @@ enumerable: true,
 });
+Object.defineProperty(exports, "ParallaxContext", {
+  enumerable: true,
+  get: function get() {
+    return _ParallaxContext2.default;
+  }
+});
 
+var _useController2 = _interopRequireDefault(require("./components/useController"));
+
 var _withController2 = _interopRequireDefault(require("./components/withController"));
@@ -41,2 +55,4 @@
 
+var _ParallaxContext2 = _interopRequireDefault(require("./helpers/ParallaxContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "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.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -153,3 +153,3 @@ # React Scroll Parallax
 
-The `<ParallaxProvider />` 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 `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
+The `<ParallaxProvider />` 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 `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
 
@@ -199,2 +199,15 @@ ```jsx
 
+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 <div />;
+};
+```
+
 ### Available Methods
@@ -233,5 +246,23 @@
 
+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;
+};
+
+// <ParallaxCache /> 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.
 
@@ -238,0 +269,0 @@ ## Browser Support

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76801

increased by3.46%

Number of package files

30

increased by3.45%

Lines of code

1303

increased by2.84%

Number of lines in readme file

277

increased by12.6%

No dependency changes