Magically animates one element into another just by tagging the first and last state.
npm install react-morph
# or
yarn add react-morphImport the useMorph hook.
const morph = useMorph(options);Then spread the props to the elements you want to morph.
<img {...morph} src="larva.png" width="50"><img {...morph} src="butterfly.png" width="80">Make sure you have just ONE element rendered at same time.
- Create two states as you normally would (HTML + CSS).
- Call
useMorphhook. - Spread the elements you want to morph with
{...morph} - Add and remove the element from the DOM
import React from 'react';
import { useMorph } from 'react-morph';() => {
// Handle toggle state as you normally would.
const [toggle, setToggle] = useState(true);
const morph = useMorph();
return (
<div>
<button onClick={() => setToggle(!toggle)}>Let's morph!</button>
<br />
{toggle ? (
<img {...morph} src={larva} width="30" />
) : (
<img {...morph} src={butterfly} width="80" />
)}
</div>
);
};Please check the documentation.
- Simplicity
- No hardcoded absolute positions
- All GPU accelerated props
- No layout or paint browser rendering
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent