https://github.com/brunnolou/react-morph

Morphing Ui transitions made simple
https://github.com/brunnolou/react-morph

Last synced: 1 day ago
JSON representation

Morphing Ui transitions made simple

• Host: GitHub
• URL: https://github.com/brunnolou/react-morph
• Owner: brunnolou
• Created: 2018-02-12T00:14:52.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T12:34:24.000Z (about 2 years ago)
• Last Synced: 2024-11-28T15:08:34.148Z (16 days ago)
• Language: TypeScript
• Homepage: https://brunnolou.github.io/react-morph
• Size: 11.3 MB
• Stars: 2,539
• Watchers: 20
• Forks: 44
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-render-props - react-morph
• awesome-list - react-morph
• awesome-react-render-props - react-morph

README

        
# React Morph ️🦋

#### Morphing UI transitions made simple

[![npm version](https://badge.fury.io/js/react-morph.svg?v0)](https://www.npmjs.com/package/react-morph)



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

## Getting Started 🐛

```sh

npm install react-morph

# or

yarn add react-morph

```

Import the `useMorph` hook.

```js

const morph = useMorph(options);

```

Then spread the props to the elements you want to morph.

```jsx



```

```jsx



```

> 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

```js

import React from 'react';

import { useMorph } from 'react-morph';

```

```jsx

() => {

  // Handle toggle state as you normally would.

  const [toggle, setToggle] = useState(true);

  const morph = useMorph();

  return (

    


       setToggle(!toggle)}>Let's morph!

      


      {toggle ? (

        

      ) : (

        

      )}

    

  );

};

```


## [Documentation](https://brunnolou.github.io/react-morph)

Please check the [documentation](https://brunnolou.github.io/react-morph).

## Features 🌟

- Simplicity

- No hardcoded absolute positions

- All GPU accelerated props

- No layout or paint browser rendering

## Live Demos

- [Hello world](https://codesandbox.io/s/yqyymqn8z1)

- [Apple App Store](https://codesandbox.io/s/7ywk4o0xmj)