Example for how to go in function

[hongbo-miao]

An example for how to go in function will be great. Thanks for the cool package!

handleGo = () => {
  // ...
}

<ReactMorph>
  {({ from, to, fadeIn, go }) => (
    <div>
      <a onClick={this.handleGo}>
        <strong {...from("title")}>ReactMorph 🐛</strong>
        <br />
        <p {...from("description")}>Morphing transitions was never so easy!</p>
      </a>

      <div>
        <h1 {...to("title")}>ReactMorph 🦋</h1>
        <br />
        <h2 {...to("description")}>Morphing transitions was never so easy!</h2>

        <a onClick={() => go(0)} {...fadeIn()}>
          Back
        </a>
      </div>
    </div>
  )}
</ReactMorph>

[beepcode]

Seems to have been added to the readme already:

<a onClick={() => go(1)}>

[hongbo-miao]

Hi @beepcode, sorry for not clear. I mean using in user’s own function like the handleGo in the above code.

[beepcode]

Ok, the simplest solution would be to pass the go() function as a parameter. This would look like so:

handleGo = (go) => { go(); }

...

<a onClick={() => this.handleGo(go)}>

[hongbo-miao]

Thanks, @beepcode , that is what I thought.

But <a onClick={() => this.handleGo(go)}> will causing rerender, right?

If it is, maybe the author can export something like below to help avoid rerender?

import { morphGo } from "react-morph";

handleGo = () => {
  morphGo();
  // something else
}

[beepcode]

You could use the lifecycle method "shouldComponentUpdate()" to prevent rerender.

[hongbo-miao]

Thanks, I get it.
Hope the package can handle those things. Better experience for the rest of people.

[beepcode]

What are you trying to achieve exactly? Which "business case" are you trying to find a solution to? From my perspective the sole purpose of "go()" is to start the morph, so rerender is expected. Or are you trying to trigger the morph from outside?

[hongbo-miao]

Oh, you are right! I forget rerender is necessary in this case for the animation. My bad.