React.js examples about mojs.github.io HOT 17 CLOSED

Hi Indrek! Thanks for the issue! Sure, will try to make some examples with react shortly, this is frequently requested!

from mojs.github.io.

Nice library! I was thinking what a more idiomatic usage of React would look like, maybe something like this:

<Timeline>
  <Burst left={0} top={0} angle={45}>
    <BurstChildren radius={10} ... />
  </Burst>
  <Shape />
</Timeline>

Mo.js seems to be mostly declarative so maybe not too much of a stretch to do a React layer around it.

from mojs.github.io.

What an amazing library, I can't wait to play around with it!

I threw together your burst example with react
http://codepen.io/rkhayat/pen/aBpMRr?editors=1010

Edit - Threw together a shape example also..
http://codepen.io/rkhayat/pen/bBgJNv?editors=0010

...I'm sure there are ways to enhance these!!!

Edit - Thanks @legomushroom for the demo! 👍

from mojs.github.io.

Hi guys!

Just remembered that I've made an example with react recently, you might want to take a look. The main idea is to use shouldComponentUpdate: false trick. - codepen demo

Will try to make more examples shortly,
Cheers!

from mojs.github.io.

@rkhayat right! Also had the idea that you can use Observer/PubSub pattern - codepen demo.

from mojs.github.io.

I'd like to make a few React demos, too- should there be another section of the docs that shows some react examples when we get a whole slew of them?

from mojs.github.io.

@twobit thanks Stephen! Looks good, my only concern is performance, not sure how performant it would be compared to the plain js version. Need to make some benchmarks probably.

from mojs.github.io.

https://codesandbox.io/s/81kyzqrz2l

React HOC to add random bursts to clicks. Wraps things, doesn't add wrapping element, bursts randomly/somewhat performantly(?), wraps any component(s), other stuff.

Had some trouble with leftover "specks" making it hard to click so I negative/initial z-indexed them with mo.js lifecycle methods.

This HOC could be expanded upon to throw all kinds of random pretty stuff like swirls and other shapes, but lines worked fine for me. Also could be expanded upon for light themes. (I made the colors bright for mine because on dark background)

Stole the burst code from an example. :X

from mojs.github.io.

Using your example above, I was able to burst at mouse pointer by passing the coordinates using refs (feels dirty, but the this._burst exists in the child element).

Burst at mouse pointer using child ref
...with es6
Thanks!

from mojs.github.io.

@sdras awesome! We can have an .md page dedicated to react examples(maybe with a little explanation) and add new ones when we will have them. So we can start with just one or two.

from mojs.github.io.

Heya!

I wanted to let you know that I made this silly hot dog burst:
http://codepen.io/sdras/full/jVXQJR

But in the process I noticed that I don't think your pens are updating state the way you might think that they are, check this out- this is a fork of @legomushroom's pen with state printed in pre tags: http://codepen.io/sdras/pen/67844da5ef9192c5378fffd0dccba28a

You'll notice that the state never toggles.

I also tried to put together a hotdog plus hamburger pen, but strangely they are both firing at once (fully willing to admit I might be doing something silly)
http://codepen.io/sdras/pen/ed0f4ff7db0505a366a673cd5ec0d3e6

I'm doing some debugging of my own, but thought I would post in case anyone else wants to join the party. :)

from mojs.github.io.

Maybe I should make a separate issue? Sorry to cloud up the thread!

from mojs.github.io.

Hi Sarah!

Hot dogs look funny 😄 👍 I've debugged your demo and looks like that reacts issue - it has one step lag in updating the prop of your effect component. That's weird and not relate to shouldComponentUpdate trick as I have tested it without it. Dunno why bu can't fork your pen so created the gist to share my latest code.

I think I had such issue before and had to come up with the PubSub solution from this thread. Basically PubSub solution mean that you don't rely on the reacts props mechanism so it works perfectly fine.

from mojs.github.io.

Thank you for the help! Unfortunately, this gist is identical to the code in my pen, so I think whatever you were working on wasn't saved properly. I'll try it out myself with the pubsub pattern though, thank you! I appreciate your time here.

from mojs.github.io.

@sdras oops you are right, it wasn't saved.

from mojs.github.io.

@legomushroom @sdras Eager to use it with React! What would you recommend as the best way to use mojs with React?

from mojs.github.io.

I got mojs successfully working with React this way:

import React, {Component} from 'react';
import mojs from 'mo-js';

export class MyAnimation extends Component {

  constructor(props) {
    super(props);

    this.burstAnimation = null;
    this.ringAnimation = null;
    this.iconAnimation = null;
  }

  componentDidMount() {
    this.initAnimation();
  }

  initAnimation() {
    const myElem = document.querySelector('#myElem');
    this.burstAnimation = new mojs.Burst({
      ...
    });

    this.ringAnimation= new mojs.Shape({
      ...
    });

    this.iconAnimation = new mojs.Tween({
      ....
    });
  }

  animate = () => {
    this.burstAnimation.replay();
    this.ringAnimation.replay();
    this.iconAnimation.replay();
  }

  render() {
    <div onClick={this.animate}>
      ...
    </div>
  }
}

from mojs.github.io.