feat: support breakpoints and className options (#95)

* feat: support breakpoints and className options

* docs: update README about options

README.md

@@ -17,7 +17,10 @@ function App() {
     setBubble(!showBubble);
   };
 
-  useLax(); // use once in the top level element
+  // use once in the top level element
+  // you can configure breakpoints and className
+  // useLax({ className: 'nice' });
+  useLax();
 
   return (
     <div>
@@ -31,16 +34,13 @@ function App() {
 }
 
 function Bubble() {
-  const ref = useLaxElement(); // use it in every component added dynamically
+  // use it in every component added dynamically
+  // it will add the className passed to `useLax`, which defaults to `lax`
+  const ref = useLaxElement();
 
-  // add `lax` in the className attribute and the data-lax-preset attribute
-  // on every component that you want to animate
+  // `lax` (or `nice` in our example) will be added to the classList of the element
   return (
-    <div
-      ref={ref}
-      className="lax bubble"
-      data-lax-preset="leftToRight fadeInOut"
-    />
+    <div ref={ref} className="bubble" data-lax-preset="leftToRight fadeInOut" />
   );
 }
 ```

src/index.ts

@@ -1,11 +1,19 @@
 import lax from 'lax.js';
 import * as React from 'react';
 
-function useLax() {
+interface LaxSetupOptions {
+  breakpoints?: { [k: string]: any };
+  className?: string;
+}
+
+let selector = 'lax';
+
+function useLax({ breakpoints, className }: LaxSetupOptions = {}) {
   const requestRef = React.useRef<number>();
+  selector = className || selector;
 
   React.useEffect(() => {
-    lax.setup();
+    lax.setup({ breakpoints, selector: `.${selector}` });
 
     const updateLax = () => {
       lax.update(window.scrollY);
@@ -19,15 +27,19 @@ function useLax() {
         window.cancelAnimationFrame(requestRef.current);
       }
     };
-  }, []);
+  }, [breakpoints, className]);
 }
 
-function useLaxElement<T>() {
-  const ref = React.useRef<T>();
+function useLaxElement() {
+  const ref = React.useRef<Element>();
 
   React.useEffect(() => {
     const currentNode = ref.current;
 
+    if (currentNode && currentNode.classList) {
+      currentNode.classList.add(selector);
+    }
+
     lax.addElement(currentNode);
 
     return () => {