Skip to content

brunnolou/react-morph

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Morph ️🦋

Morphing UI transitions made simple

npm version

Magically animates one element into another just by tagging the first and last state.

Getting Started 🐛

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.

Simple Example 🦋

  1. Create two states as you normally would (HTML + CSS).
  2. Call useMorph hook.
  3. Spread the elements you want to morph with {...morph}
  4. 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>
  );
};

Documentation

Please check the documentation.

Features 🌟

  • Simplicity
  • No hardcoded absolute positions
  • All GPU accelerated props
  • No layout or paint browser rendering

Live Demos