@studio-freight/react-lenis - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

dist/react-lenis.js

@@ -1,2 +0,2 @@
-var e=require("@studio-freight/hamo"),t=require("@studio-freight/lenis"),r=require("prop-types"),n=require("react"),a=require("zustand");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/o(t),i=/*#__PURE__*/o(r),c=/*#__PURE__*/o(n);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}var f=n.createContext(),s=a.create(function(){return{}}),d=n.forwardRef(function(t,r){var a=t.children,o=t.root,i=void 0!==o&&o,d=t.options,p=void 0===d?{}:d,v=t.isStopped,b=void 0!==v&&v,m=t.className,k=n.useRef(),y=n.useRef(),C=n.useState(),h=C[0],g=C[1],E=n.useRef([]),R=n.useCallback(function(e,t){E.current.push({callback:e,priority:t}),E.current.sort(function(e,t){return e.priority-t.priority})},[]),j=n.useCallback(function(e){E.current=E.current.filter(function(t){return t.callback!==e})},[]);n.useImperativeHandle(r,function(){return h},[h]),n.useEffect(function(){var e=new u.default(l({},p,!i&&{wrapper:k.current,content:y.current}));return g(e),function(){e.destroy(),g(void 0)}},[i,JSON.stringify(p)]),e.useFrame(function(e){null==h||h.raf(e)}),n.useEffect(function(){h&&(b?h.stop():h.start())},[h,b]),n.useEffect(function(){i&&h&&s.setState({lenis:h,addCallback:R,removeCallback:j})},[i,h,R,j]);var q=n.useCallback(function(e){for(var t=0;t<E.current.length;t++)E.current[t].callback(e)},[]);return n.useEffect(function(){if(h)return h.on("scroll",q),function(){h.off("scroll",q)}},[h,q]),/*#__PURE__*/c.default.createElement(f.Provider,{value:{lenis:h,addCallback:R,removeCallback:j}},i?a:/*#__PURE__*/c.default.createElement("div",{ref:k,className:m},/*#__PURE__*/c.default.createElement("div",{ref:y},a)))});d.displayName="ReactLenis",d.propTypes={children:i.default.node,root:i.default.bool,options:i.default.object,isStopped:i.default.bool,className:i.default.string},exports.Lenis=d,exports.ReactLenis=d,exports.useLenis=function(e,t,r){void 0===e&&(e=void 0),void 0===t&&(t=[]),void 0===r&&(r=0);var a,o,u=(a=n.useContext(f),o=s(),null!=a?a:o),i=u.lenis,c=u.addCallback,l=u.removeCallback;return n.useEffect(function(){if(e&&c&&l&&i)return c(e,r),e(i),function(){l(e)}},[i,c,l,r].concat(t)),i};
+var e=require("@studio-freight/hamo"),t=require("@studio-freight/lenis"),r=require("prop-types"),n=require("react"),a=require("zustand");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/o(t),i=/*#__PURE__*/o(r),c=/*#__PURE__*/o(n);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}var f=n.createContext(),s=a.create(function(){return{}}),d=n.forwardRef(function(t,r){var a=t.children,o=t.root,i=void 0!==o&&o,d=t.options,p=void 0===d?{}:d,v=t.isStopped,b=void 0!==v&&v,m=t.autoRaf,y=void 0===m||m,k=t.rafPriority,C=void 0===k?0:k,h=t.className,g=n.useRef(),E=n.useRef(),R=n.useState(),j=R[0],q=R[1],x=n.useRef([]),N=n.useCallback(function(e,t){x.current.push({callback:e,priority:t}),x.current.sort(function(e,t){return e.priority-t.priority})},[]),O=n.useCallback(function(e){x.current=x.current.filter(function(t){return t.callback!==e})},[]);n.useImperativeHandle(r,function(){return j},[j]),n.useEffect(function(){var e=new u.default(l({},p,!i&&{wrapper:g.current,content:E.current}));return q(e),function(){e.destroy(),q(void 0)}},[i,JSON.stringify(p)]),e.useFrame(function(e){y&&(null==j||j.raf(e))},C),n.useEffect(function(){j&&(b?j.stop():j.start())},[j,b]),n.useEffect(function(){i&&j&&s.setState({lenis:j,addCallback:N,removeCallback:O})},[i,j,N,O]);var S=n.useCallback(function(e){for(var t=0;t<x.current.length;t++)x.current[t].callback(e)},[]);return n.useEffect(function(){if(j)return j.on("scroll",S),function(){j.off("scroll",S)}},[j,S]),/*#__PURE__*/c.default.createElement(f.Provider,{value:{lenis:j,addCallback:N,removeCallback:O}},i?a:/*#__PURE__*/c.default.createElement("div",{ref:g,className:h},/*#__PURE__*/c.default.createElement("div",{ref:E},a)))});d.displayName="ReactLenis",d.propTypes={children:i.default.node,root:i.default.bool,options:i.default.object,isStopped:i.default.bool,autoRaf:i.default.bool,rafPriority:i.default.number,className:i.default.string},exports.Lenis=d,exports.ReactLenis=d,exports.useLenis=function(e,t,r){void 0===e&&(e=void 0),void 0===t&&(t=[]),void 0===r&&(r=0);var a,o,u=(a=n.useContext(f),o=s(),null!=a?a:o),i=u.lenis,c=u.addCallback,l=u.removeCallback;return n.useEffect(function(){if(e&&c&&l&&i)return c(e,r),e(i),function(){l(e)}},[i,c,l,r].concat(t)),i};
 //# sourceMappingURL=react-lenis.js.map

dist/react-lenis.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@studio-freight/hamo"),require("@studio-freight/lenis"),require("prop-types"),require("react"),require("zustand")):"function"==typeof define&&define.amd?define(["exports","@studio-freight/hamo","@studio-freight/lenis","prop-types","react","zustand"],t):t((e||self).reactLenis={},e.hamo,e.Lenis,e.propTypes,e.react,e.zustand)}(this,function(e,t,r,n,o,i){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/a(r),c=/*#__PURE__*/a(n),f=/*#__PURE__*/a(o);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}var s=o.createContext(),d=i.create(function(){return{}}),p=o.forwardRef(function(e,r){var n=e.children,i=e.root,a=void 0!==i&&i,c=e.options,p=void 0===c?{}:c,v=e.isStopped,b=void 0!==v&&v,y=e.className,h=o.useRef(),m=o.useRef(),g=o.useState(),k=g[0],C=g[1],E=o.useRef([]),j=o.useCallback(function(e,t){E.current.push({callback:e,priority:t}),E.current.sort(function(e,t){return e.priority-t.priority})},[]),L=o.useCallback(function(e){E.current=E.current.filter(function(t){return t.callback!==e})},[]);o.useImperativeHandle(r,function(){return k},[k]),o.useEffect(function(){var e=new u.default(l({},p,!a&&{wrapper:h.current,content:m.current}));return C(e),function(){e.destroy(),C(void 0)}},[a,JSON.stringify(p)]),t.useFrame(function(e){null==k||k.raf(e)}),o.useEffect(function(){k&&(b?k.stop():k.start())},[k,b]),o.useEffect(function(){a&&k&&d.setState({lenis:k,addCallback:j,removeCallback:L})},[a,k,j,L]);var R=o.useCallback(function(e){for(var t=0;t<E.current.length;t++)E.current[t].callback(e)},[]);return o.useEffect(function(){if(k)return k.on("scroll",R),function(){k.off("scroll",R)}},[k,R]),/*#__PURE__*/f.default.createElement(s.Provider,{value:{lenis:k,addCallback:j,removeCallback:L}},a?n:/*#__PURE__*/f.default.createElement("div",{ref:h,className:y},/*#__PURE__*/f.default.createElement("div",{ref:m},n)))});p.displayName="ReactLenis",p.propTypes={children:c.default.node,root:c.default.bool,options:c.default.object,isStopped:c.default.bool,className:c.default.string},e.Lenis=p,e.ReactLenis=p,e.useLenis=function(e,t,r){void 0===e&&(e=void 0),void 0===t&&(t=[]),void 0===r&&(r=0);var n,i,a=(n=o.useContext(s),i=d(),null!=n?n:i),u=a.lenis,c=a.addCallback,f=a.removeCallback;return o.useEffect(function(){if(e&&c&&f&&u)return c(e,r),e(u),function(){f(e)}},[u,c,f,r].concat(t)),u}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@studio-freight/hamo"),require("@studio-freight/lenis"),require("prop-types"),require("react"),require("zustand")):"function"==typeof define&&define.amd?define(["exports","@studio-freight/hamo","@studio-freight/lenis","prop-types","react","zustand"],t):t((e||self).reactLenis={},e.hamo,e.Lenis,e.propTypes,e.react,e.zustand)}(this,function(e,t,r,n,o,a){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/*#__PURE__*/i(r),f=/*#__PURE__*/i(n),c=/*#__PURE__*/i(o);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}var s=o.createContext(),d=a.create(function(){return{}}),p=o.forwardRef(function(e,r){var n=e.children,a=e.root,i=void 0!==a&&a,f=e.options,p=void 0===f?{}:f,v=e.isStopped,b=void 0!==v&&v,y=e.autoRaf,m=void 0===y||y,h=e.rafPriority,g=void 0===h?0:h,k=e.className,C=o.useRef(),E=o.useRef(),R=o.useState(),j=R[0],L=R[1],q=o.useRef([]),x=o.useCallback(function(e,t){q.current.push({callback:e,priority:t}),q.current.sort(function(e,t){return e.priority-t.priority})},[]),N=o.useCallback(function(e){q.current=q.current.filter(function(t){return t.callback!==e})},[]);o.useImperativeHandle(r,function(){return j},[j]),o.useEffect(function(){var e=new u.default(l({},p,!i&&{wrapper:C.current,content:E.current}));return L(e),function(){e.destroy(),L(void 0)}},[i,JSON.stringify(p)]),t.useFrame(function(e){m&&(null==j||j.raf(e))},g),o.useEffect(function(){j&&(b?j.stop():j.start())},[j,b]),o.useEffect(function(){i&&j&&d.setState({lenis:j,addCallback:x,removeCallback:N})},[i,j,x,N]);var O=o.useCallback(function(e){for(var t=0;t<q.current.length;t++)q.current[t].callback(e)},[]);return o.useEffect(function(){if(j)return j.on("scroll",O),function(){j.off("scroll",O)}},[j,O]),/*#__PURE__*/c.default.createElement(s.Provider,{value:{lenis:j,addCallback:x,removeCallback:N}},i?n:/*#__PURE__*/c.default.createElement("div",{ref:C,className:k},/*#__PURE__*/c.default.createElement("div",{ref:E},n)))});p.displayName="ReactLenis",p.propTypes={children:f.default.node,root:f.default.bool,options:f.default.object,isStopped:f.default.bool,autoRaf:f.default.bool,rafPriority:f.default.number,className:f.default.string},e.Lenis=p,e.ReactLenis=p,e.useLenis=function(e,t,r){void 0===e&&(e=void 0),void 0===t&&(t=[]),void 0===r&&(r=0);var n,a,i=(n=o.useContext(s),a=d(),null!=n?n:a),u=i.lenis,f=i.addCallback,c=i.removeCallback;return o.useEffect(function(){if(e&&f&&c&&u)return f(e,r),e(u),function(){c(e)}},[u,f,c,r].concat(t)),u}});
 //# sourceMappingURL=react-lenis.umd.js.map

package.json

 {
   "name": "@studio-freight/react-lenis",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "",
@@ -35,3 +35,6 @@ "files": [
   },
-  "keywords": [],
+  "keywords": [
+    "react",
+    "lenis"
+  ],
   "author": "@studio-freight",
@@ -61,4 +64,3 @@ "license": "ISC",
     "typescript": "^5.1.3",
-    "vite": "^4.3.9",
-    "zustand": "^4.3.2"
+    "vite": "^4.3.9"
   },
@@ -77,5 +79,5 @@ "size-limit": [
     "@studio-freight/hamo": "^0.6.17",
-    "@studio-freight/lenis": "^1.0.14",
+    "@studio-freight/lenis": "^1.0.16",
     "prop-types": "^15.8.1",
-    "zustand": "^4.3.8"
+    "zustand": "^4.3.9"
   },
@@ -82,0 +84,0 @@ "peerDependencies": {

README.md

@@ -1,2 +0,2 @@
-[![Bibliotheca](https://assets.studiofreight.com/bibliotheca/header.png)](https://github.com/studio-freight/bibliotheca)
+<!-- [![Bibliotheca](https://assets.studiofreight.com/bibliotheca/header.png)](https://github.com/studio-freight/bibliotheca) -->
 
@@ -20,8 +20,5 @@ <!-- <p align="center">
 ## Introduction
+react-lenis provides a `<ReactLenis>` component that creates a [Lenis](https://github.com/studio-freight/lenis) instance and provides it to its children via context. This allows you to use Lenis in your React app without worrying about passing the instance down through props. It also provides a `useLenis` hook that allows you to access the Lenis instance from any component in your app.
 
-react-lenis creates and manages an instance of the [Lenis](https://github.com/studio-freight/lenis).
-It takes in a root prop and an options object that is spread into the Lenis constructor.
 
-If `root` is true, `<ReactLenis>` will be the root Lenis instance and all other `<ReactLenis>` components in the app will get the instance from the context. If `root` is false, the component will create a new Lenis instance and provide it via the context. It's recommended to only have one `<ReactLenis root>` component in your app.
-
 <br/>
@@ -45,6 +42,6 @@
 ```js
-import { Lenis as ReactLenis, useLenis } from '@studio-freight/react-lenis'
+import { ReactLenis, useLenis } from '@studio-freight/react-lenis'
 
 function Layout() {
-  const lenis = useLenis(({scroll}) => {
+  const lenis = useLenis(({ scroll }) => {
     // called every scroll
@@ -54,4 +51,4 @@ })
   return (
-    <ReactLenis root options={{ ...options }}>
-      {/* Your scrollable website */}
+    <ReactLenis root>
+      { /* content */ }
     </ReactLenis>
@@ -63,8 +60,11 @@ )
 
-## Options
-The `options` object is passed directly to the Lenis instance, check [their readme for reference](https://github.com/studio-freight/lenis#instance-settings)
+## Props
+- `options`: [Lenis options](https://github.com/studio-freight/lenis#instance-settings).
+- `root`: Lenis will be instanciate using `<html>` scroll. Default: `false`.
+- `autoRaf`: if `false`, `lenis.raf` needs to be called manually. Default: `true`.
+- `rAFpriority`: [Tempus](https://github.com/studio-freight/tempus#readme) execution priority. Default: `0`.
 
 <br/>
 
-## Extras
+## Hooks
 Once the Lenis context is set (components mounted inside `<ReactLenis>`) you can use these handy hooks:
@@ -75,7 +75,31 @@
 The hook takes three argument:
-- callback: The function to be called whenever a scroll event is emitted
-- deps array: Trigger callback on change
-- priority: Manage callback execution order
+- `callback`: The function to be called whenever a scroll event is emitted
+- `deps`: Trigger callback on change
+- `priority`: Manage callback execution order
 
+## Examples
 
+GSAP integration
+
+```js
+  const lenisRef = useRef()
+
+  useEffect(() => {
+    function update(time) {
+      lenisRef.current?.raf(time * 1000)
+    }
+
+    gsap.ticker.add(update)
+
+    return () => {
+      gsap.ticker.remove(update)
+    }
+  })
+
+  <ReactLenis ref={lenisRef} autoRaf={false}>
+    { /* content */ }
+  </ReactLenis>
+```
+
+
 <br/>
@@ -97,3 +121,2 @@
 - [@studio-freight/compono](https://github.com/studio-freight/compono) Our Next.js/React component library.
-
 - [@studio-freight/satus](https://github.com/studio-freight/satus) Our starter kit.
@@ -100,0 +123,0 @@

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

43859

increased by10.46%

Dev dependency count

18

decreased by-5.26%

Lines of code

45

increased by4.65%

Number of lines in readme file

134

increased by20.72%

Dependency changes

• Updated@studio-freight/lenis@^1.0.16

• Updatedzustand@^4.3.9