Hype in React or as React component


#1

Just wondering if anyone has put Hype into a ReactJS app and how they did it.


#2

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.


(Wilfred Greyling) #3

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.


(Matt) #4

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


#5

Any updates on this? @matt5834 @noah-kun?


#6

@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 :slight_smile: