Comments (11)
Hey! Glad you're enjoying it :)
I didn't write the react hooks lib but I'll gladly take a look if you can provide an example!
from lax.js.
Ahhh, hooks are a native react implementation! Lemme double check if it's also breaking using React classes and I'll report back ASAP :)
If not then, I'll leave an example here for how to replicate the scenario!
from lax.js.
How did u get on?
from lax.js.
hey! so sorry, got caught up with work work. But here are some findings!
React version 16.8.6
Findings:
- Class implementation of lax.js works [obviously].
- If you define
lax.setup
in a class constructor on the root element, using hooks to addlax.addElement
also works. - However, if you use
useEffect
hook to initializelax.setup
it fails to update the subscribed element
I'm double checking on a code sandbox to see if it's consistent too! One moment
Edit:
Here's a react sandbox:
https://codesandbox.io/embed/nryzvz71wp
Basically, there are two types of setups:
- [Fails] using a function and react hooks
useEffect
to setup lax - [Passes] using a class constructor and setup lax
I'll be diving deeper later but this is all I have for now!
from lax.js.
@AndrewThian, if you move the lax.setup
call to outside of the useEffect
hook, it works as expected, but I'm not sure if that's the right solution because as you said, it worked properly with v1.1.0
.
@alexfoxy, a pull request was opened on my library, use-lax
, to move the call to outside of the hook, but I think the more problem is on lax
itself.
from lax.js.
lax.setup()
should be called before anything else as it sets it's elements equal to []. I debugged your example and useEffect()
in bubble.js gets called before useEffect()
in App.js.
You should only call lax.setup()
in App constructor.
from lax.js.
@alexfoxy, nothing changed in lax
within 1.1.x
and 1.2.x
? Because it works properly with previous versions using lax.setup
inside the hook (after the component mounts).
from lax.js.
Check out this sandbox with [email protected]
and then upgrade it to the 1.2.0
.
from lax.js.
It is because in previous versions lax would look for components with attribute names to populate elements e.g. data-lax-preset="fadeIn"
so it was finding the bubble element when lax.setup()
was called. In v1.2 you need to add class='lax'
to any elements that you want to be automatically animated by lax, so you can fix your example with className="bubble lax"
, however it makes more sense to do what I said and call lax.setup()
asap.
from lax.js.
ahhhhhh, totally my bad. Didn't read the README well enough! Thanks so much for explaining @alexfoxy really helped out a lot. You're right, I think just shifting the lax.setup
outside of the useEffect hook would mean lax is initialized with the creation of the function just like the class constructor.
May I suggest a update in documentation for those using React hooks and migrating from 1.1.x to 1.2.x? :) Thanks again!
from lax.js.
It is because in previous versions lax would look for components with attribute names to populate elements e.g.
data-lax-preset="fadeIn"
so it was finding the bubble element whenlax.setup()
was called. In v1.2 you need to addclass='lax'
to any elements that you want to be automatically animated by lax, so you can fix your example withclassName="bubble lax"
, however it makes more sense to do what I said and calllax.setup()
asap.
I see, thanks for the explanation.
from lax.js.
Related Issues (20)
- Can I add DOM from jQuery HOT 2
- Changing color on scroll HOT 1
- spinRev ? HOT 4
- Animate border-radius in % rather than pixels
- Having one element's scroll position control a different element's animation HOT 1
- Angular Example
- Support / Example for Svelte HOT 1
- VueJS 3 Example HOT 1
- Trigger video playback HOT 3
- How to perform animation only once and until end position reached? HOT 3
- Trouble centering an element on screen HOT 1
- How to use the options? I can find any info about it. HOT 1
- Support for backgroundPositionX and backgroundPositionY HOT 2
- Performance issues and crashes on iOS HOT 16
- Using with React? HOT 1
- Animation delay HOT 1
- Creating a toggle that turns Lax on and off
- Lax js not working when I set `height: 100%;` to html tag
- z-index not work on ios because of default translate3d(0.00001px, 0.00001px, 0.00001px); HOT 4
- Infinite loop encountered in the on-update example
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lax.js.