https://github.com/arthurdenner/use-lax

React hook to use with lax.js
https://github.com/arthurdenner/use-lax

animation hacktoberfest lax react

Last synced: 9 days ago
JSON representation

React hook to use with lax.js

• Host: GitHub
• URL: https://github.com/arthurdenner/use-lax
• Owner: arthurdenner
• Archived: true
• Created: 2019-03-25T02:30:58.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-07-19T00:54:56.000Z (over 1 year ago)
• Last Synced: 2024-10-28T00:03:42.850Z (19 days ago)
• Topics: animation, hacktoberfest, lax, react
• Language: TypeScript
• Homepage:
• Size: 3.53 MB
• Stars: 62
• Watchers: 3
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# use-lax

[![npm](https://img.shields.io/npm/v/use-lax.svg)](https://www.npmjs.org/package/use-lax)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg)](#contributors)

React hook to use with [lax.js](https://github.com/alexfoxy/lax.js).

## Usage

```javascript

import React from 'react';

import { useLax, useLaxElement } from 'use-lax';

function App() {

  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 (

    


      

        Toggle Bubble

      

      
{showBubble ? '...now scroll down...' : '^ press the button ^'}

      {showBubble ?  : null}

    

  );

}


function Bubble() {

  // 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 
;

}

```


- [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

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Arthur Denner
💻 🎨 📖 💡 🤔 🚧

    
Antoine Martin
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!