}
27 |
59 | 60 | {toggle ? ( 61 |
8 |
9 | Magically animates one element into another just by tagging the first and last state.
10 |
11 | ## Getting Started 🐛
12 |
13 | ```sh
14 | npm install react-morph
15 | # or
16 | yarn add react-morph
17 | ```
18 |
19 | Import the `useMorph` hook.
20 |
21 | ```js
22 | const morph = useMorph(options);
23 | ```
24 |
25 | Then spread the props to the elements you want to morph.
26 |
27 | ```jsx
28 | 
29 | ```
30 |
31 | ```jsx
32 | 
33 | ```
34 |
35 | > Make sure you have just **ONE element rendered at same time**.
36 |
37 | ## Simple Example 🦋
38 |
39 | 1. Create two states as you normally would (HTML + CSS).
40 | 2. Call `useMorph` hook.
41 | 3. Spread the elements you want to morph with `{...morph}`
42 | 4. Add and remove the element from the DOM
43 |
44 | ```js
45 | import React from 'react';
46 | import { useMorph } from 'react-morph';
47 | ```
48 |
49 | ```jsx
50 | () => {
51 | // Handle toggle state as you normally would.
52 | const [toggle, setToggle] = useState(true);
53 | const morph = useMorph();
54 |
55 | return (
56 |
35 | ```
36 |
37 | ```jsx
38 |
39 | ```
40 |
41 | You should handle the state as you normally would for mounting and unmounting the elements.
42 |
43 | > Make sure you have just **ONE element rendered at same time**.
44 |
45 | ![Album Pic]({"/public/sky-wide.jpg"})
15 | 29 | Ghost Stories 30 |
31 |0:40
100 |4:20
101 |
19 | 33 | Ghost Stories 34 |
35 |86 | Panorama Grossmünster limmat river 87 |
88 |
36 | ```
37 |
38 | ## Simple fade
39 |
40 | Foo
34 |