react-morph

React Morph ️

Morphing UI transitions made simple

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.

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 (
    

  );
};

Documentation

Please check the documentation.

Features

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

Live Demos

• Hello world
• Apple App Store