Magically animates one element into another just by tagging the first and last state.
npm install react-morph
# or
yarn add react-morph
Import 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.
useMorph
hook.{...morph}
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.