Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunnolou/react-morph
Morphing Ui transitions made simple
https://github.com/brunnolou/react-morph
Last synced: about 2 months 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T12:34:24.000Z (over 1 year ago)
- Last Synced: 2024-05-05T06:40:20.976Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://brunnolou.github.io/react-morph
- Size: 11.3 MB
- Stars: 2,536
- Watchers: 20
- Forks: 44
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Lists
- awesome-list - react-morph
- awesome-react-render-props - react-morph
- awesome - brunnolou/react-morph - Morphing Ui transitions made simple (TypeScript)
- awesome-stars - react-morph
- awesome-stars - brunnolou/react-morph - Morphing Ui transitions made simple (TypeScript)
- awesome-stars - react-morph - Morphing Ui transitions made simple (JavaScript)
- awesome-react-render-props - react-morph
- awesome-stars - brunnolou/react-morph - Morphing Ui transitions made simple (TypeScript)
- my-awesome-stars - brunnolou/react-morph - Morphing Ui transitions made simple (TypeScript)
README
# React Morph ️🦋
#### Morphing UI transitions made simple
[](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)