From 7e1758ccc0de9bc5139c5cdd9d802fb112083902 Mon Sep 17 00:00:00 2001
From: Arthur Denner <arthurdenner7@gmail.com>
Date: Thu, 27 Jan 2022 18:29:26 +0100
Subject: [PATCH] fix: support preset usage (#638)

* fix: support preset usage

* docs: update README
---
 README.md    | 58 ++++++++++++++++++++++++++++++----------------------
 src/index.ts | 12 +++++++++++
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 07f1f271..7f373953 100644
--- a/README.md
+++ b/README.md
@@ -5,51 +5,61 @@
 
 React hook to use with [lax.js](https://github.com/alexfoxy/lax.js).
 
-### Usage
+## Usage
 
 ```javascript
 import React from 'react';
 import { useLax, useLaxElement } from 'use-lax';
 
 function App() {
-  const [showBubble, setBubble] = React.useState(false);
-  const toggleBubble = () => {
-    setBubble(!showBubble);
-  };
-
-  // use once in the top level element
-  // you can configure breakpoints and className
-  // useLax({ className: 'nice' });
-  useLax();
+  const [showBubble, setBubble] = useState(false);
+  const toggleBubble = () => setBubble(!showBubble);
+
+  // Use once in the top level element
+  // to configure drivers and initial elements
+  // https://github.com/alexfoxy/lax.js#setup
+  useLax({
+    drivers: [
+      {
+        name: 'scrollY',
+        getValueFn: () => window.scrollY,
+      },
+    ],
+  });
 
   return (
     <div>
       <button className="toggle-bubble" onClick={toggleBubble}>
         Toggle Bubble
       </button>
-      <p>{showBubble ? '..now scroll down..' : '^ press the button ^'}</p>
+      <p>{showBubble ? '...now scroll down...' : '^ press the button ^'}</p>
       {showBubble ? <Bubble /> : null}
     </div>
   );
 }
 
 function Bubble() {
-  // use it in every component added dynamically
-  // it will add the className passed to `useLax`, which defaults to `lax`
-  const ref = useLaxElement();
-
-  // `lax` (or `nice` in our example) will be added to the classList of the element
-  return (
-    <div ref={ref} className="bubble" data-lax-preset="leftToRight fadeInOut" />
-  );
+  // Use it on every component added dynamically
+  // and provide the animation driven from the drivers
+  const ref = useLaxElement({
+    animationData: {
+      scrollY: {
+        presets: ['fadeInOut:200:0'],
+        translateX: [
+          [0, 'screenHeight'],
+          [0, 'screenWidth'],
+        ],
+      },
+    },
+  });
+
+  return <div ref={ref} className="bubble" />;
 }
 ```
 
-See the full example [here](https://codesandbox.io/s/q9882qjxzq).
-
-See the [lax demo](https://alexfox.dev/lax.js/) built with `React` and `use-lax` [here](https://codesandbox.io/s/039krok5ml).
-
-See the [Mario demo](https://alexfox.dev/lax.js/sprite.html) built with `React` and `use-lax` [here](https://codesandbox.io/s/r48kz0okrm).
+- [Full example above](https://codesandbox.io/s/q9882qjxzq)
+- [Lax homepage example](https://codesandbox.io/s/039krok5ml) - [HTML version](https://alexfox.dev/lax.js/)
+- [Mario example](https://codesandbox.io/s/r48kz0okrm) - [HTML version](https://codesandbox.io/s/vcv4k)
 
 ## Contributors
 
diff --git a/src/index.ts b/src/index.ts
index 68efefc1..98630d3a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -128,7 +128,19 @@ export interface LaxInitOptions {
   elements?: LaxElement[];
 }
 
+declare global {
+  interface Window {
+    lax: typeof lax;
+  }
+}
+
 function useLax({ drivers, elements }: LaxInitOptions = {}) {
+  React.useEffect(() => {
+    if (!window.lax) {
+      window.lax = lax;
+    }
+  }, []);
+
   React.useEffect(() => {
     lax.init();