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 (
-
{showBubble ? '..now scroll down..' : '^ press the button ^'}
+
{showBubble ? '...now scroll down...' : '^ press the button ^'}
{showBubble ?
: null}
);
}
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 (
-
- );
+ // 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 ;
}
```
-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();