I'm new to React. At the moment I manage to update my simple website from standard HTML, CSS, JS to React, SASS, JSX and so on. The problem I have is that there is a canvas tag where I run an animation made in Vanilla Javascript using the Paperjs library, but I have not idea on how to implement my current JS animation to my React project.
This is what I have in my body tag:
<canvas id='paperjs-canvas' resize></canvas>
<script src="js/libs/paper-full.min.js"></script>
<script src="js/jellies/jelly.min.js"></script>
<script src="js/jellies/tentacle.min.js"></script>
<script src="js/jellies/paper-jellies.min.js"></script>
This is just a simple background animation, there is no interaction with DOM elements.
I wander if it would be possible to implement my current code in to React as is, and if so, how?
Any help will be much appreciated.
I'm new to React. At the moment I manage to update my simple website from standard HTML, CSS, JS to React, SASS, JSX and so on. The problem I have is that there is a canvas tag where I run an animation made in Vanilla Javascript using the Paperjs library, but I have not idea on how to implement my current JS animation to my React project.
This is what I have in my body tag:
<canvas id='paperjs-canvas' resize></canvas>
<script src="js/libs/paper-full.min.js"></script>
<script src="js/jellies/jelly.min.js"></script>
<script src="js/jellies/tentacle.min.js"></script>
<script src="js/jellies/paper-jellies.min.js"></script>
This is just a simple background animation, there is no interaction with DOM elements.
I wander if it would be possible to implement my current code in to React as is, and if so, how?
Any help will be much appreciated.
Share Improve this question asked May 30, 2019 at 19:33 Ricardo SanchezRicardo Sanchez 5,19712 gold badges61 silver badges95 bronze badges 3- you want to render <canvas> inside a react ponent? – stackoverflow Commented May 30, 2019 at 19:40
- @BarbuBarbu yes I do, my idea is to have different JS animations to render on the canvas tag, so I can allow the user to select which animation to see/run – Ricardo Sanchez Commented May 30, 2019 at 20:39
- then that would be a bit more plex to do it, you'll have to wrap all the logic inside ponent did mount and there, when your animation needs to change, you'd have to load all the js related libraries dynamically and bind them to the <canvas> ref element...not sure how much you've understood, but I hope I gave you an ideea – stackoverflow Commented May 31, 2019 at 7:20
1 Answer
Reset to default 4React needs to be in full control of its DOM branch (usually a <div id="root"/> under <body>).
As long as you put the <canvas /> outside of the React's DOM branch, you won't have any problem with it.
Example:
<html>
<head>...</head>
<body>
<div id="root"></div> <!-- React branch -->
<canvas id="paperjs-canvas" resize></canvas> <!-- Here you are in control -->
...
</body>
</html>