Performant, zero-re-render animations for React using MobX.
npm install mobxmotionmobxmotion allows you to animate elements using mobx without re-rendering the parent component.
mobxmotion.div is a drop-in replacement for a normal div, except its style prop can include getters.
If a getter is present, the given style value will be re-evaluated and updated when mobx detects a change, but the parent component will not re-render.
``bash`
yarn add mobxmotionor
npm install mobxmotionor
pnpm add mobxmotion
Let's say we have some observable x value and we want to use it to set the transform style of a div.
`tsx
import { mobxmotion } from "mobxmotion";
import { observable } from "mobx";
const x = observable.box(0);
export function Demo() {
useSomeHeavyComputation(); // Render is expensive
return (
// Use getter instead of regular value
// transform: translate(${x.get()}px, 0),translate(${x.get()}px, 0)
get transform() {
return ;`
},
}}
>
x.set(randomInt(0, 300));
}}
>
Set random x position
);
}
When observable x changes, style.transform will be re-evaluated and updated, but the component itself will not re-render.
In the example above, when x changes, the component will instantly move to the new position.
We can easily use spring animation to make the movement smooth.
The only change we need to make is to pass x value through $spring function inside the getter.
Change this:
`tsx
style={{
get transform() {
const transformX = x.get();
return translate(${transformX}px, 0);`
},
}}
To this:
`tsx
style={{
get transform() {
const transformX = $spring(x.get());
return translate(${transformX}px, 0);`
},
}}
And that's it! Now when x changes, transform will be animated to the new value. Component will not re-render during the animation.
The full example with spring animation:
`tsx
import { mobxmotion, $spring } from "mobxmotion";
import { observable } from "mobx";
const x = observable.box(0);
export function Demo() {
return (
get transform() {
const transformX = $spring(x.get());
return translate(${transformX}px, 0);`
},
}}
>
x.set(randomInt(0, 300));
}}
>
Random x position
);
}
> [!NOTE]
>
> $spring calls inside getters have to follow same rules as React hooks.$spring
>
> They cannot be called conditionally, they have to be called on every getter call. You can use multiple calls in one getter, but you have to call it the same number of times in every getter call.
---
All the other props are exactly the same as in normal div.
You can still use regular styles, without getters, as you would do with a normal div.
Every existing div can be replaced with mobxmotion.div without any changes to the code.
You can also use mobxmotion.p, mobxmotion.span, mobxmotion.button, etc. for every HTML and SVG` element.
MIT License
Copyright (c) 2024 Adam Pietrasiak
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.