Just wondering if anyone has put Hype into a ReactJS app and how they did it.
I tried a few things. First, I tried to import (ES6 version of require) the script, but that gave an error. So I used the old style of including the script with a <script> tag. Then in my JSX component, I put an element with the appropriate class name to attach the animation to. But it attached the Hype animation in the top leftmost part of the page, not where I wanted it and despite the CSS.
Just started trying to achieve this. Not sure if it will fly in the end but this what I am doing to make it go.
Currently only using the animation as background so no interaction (yet)
I achieved this via iFrame theory. So the exported Hype HTML5 remains untouched. Jut put it somewhere accessible. I use Rails/React/NPM setup so I am just dropping the exports into the public folder of the Rails environment. Nothing fancy at this stage.
So I installed the NPM apeman-react-frame module. Guess this the key to the problem for me.
In my main file I used the imports:
import {ApFrame, ApFrameStyle} from 'apeman-react-frame' import {ApSpinnerStyle} from 'apeman-react-spinner'
In the render function of the same file I am switching hype documents based on screen width:
(Width is obtained via react-measure)
const topAnimation = this.state.data.get('width') < 500 ? "/animations/mobile.html" : "/animations/desktop.html";
Also creating an offset constant to center the animation horizontally.
I used all kinds of CSS tricks but they failed when going to mobile so I just stuck to good old react.
const offset = ((animationWidth - this.state.data.get('width'))/2) * -1;
Then the render piece:
`<div style={{position: ‘absolute’, top: 0, left: offset}}>
That is working at the moment but I am certain there are better ways of achieving this as well as better interactivity. I am now on the journey to try and dump the iFrame and bring the code directly into react. I would love to hear what you guys came up with.
2 Likes
Hi @noah-kun
I am trying to also put a hype doc into React. Did you ever have success with this? Can you share any examples?
Thank you!
Matt
@Daniel @matt5834 See the post above yours: Hype in React or as React component
I don’t remember if i tried it or now.
@Daniel Would love to be able to easily export Hype creations as React components 
It would be really great if tumult could have a npm lib to run animations in React! Please can we have this? Also if you can import the core once for multiple animations on the page, that would be amazing to reduce bundle size.
2 Likes
Thanks for the request!
1 Like