CODEWITHSUNDEEP
javascriptreactjs
Amir
Amir

Reputation: 2540

How to incorporate Vanilla JS components into React

I am trying to use winwheel.js library to configure and render a wheel to style and animate divs. The documentation shows how to create a Vanilla JS component. However, I'm working with React, and the documentation doesn't show how to use Vanilla JS components in React.

I added the npm package winwheel to my package.json. I've tried creating a React component, and writing the vanilla JS in it, and then importing it into my React Component as . I also tried creating a class Component and set this.wheel = new WinWheel({configuration}); Then return a rendered wheel.

I also tried creating a element in my React component, and put the inside the canvas tag. Here's my React Component.

`import React from 'react';
 import Wheel from './Wheel.js';

    class Dashboard extends React.Component {


      render() {
         return (
          <>
            {/* <Wheel /> */}
            <canvas id='myCanvas' width='880' height='300'>
                {Wheel}
            </canvas>
          </>
      }`

Here is a way I created the Wheel component:

 `import Winwheel from 'winwheel';

   let Wheel = new Winwheel({
     'canvasId': 'myCanvas',
     'numSegments': 4,
     'segments':
     [
        { 'fillStyle': '#eae56f', 'text': 'Prize One' },
        { 'fillStyle': '#89f26e', 'text': 'Prize Two' },
        { 'fillStyle': '#7de6ef', 'text': 'Prize Three' },
        { 'fillStyle': '#e7706f', 'text': 'Prize Four' }
     ],
     'animation':
    {
      'type': 'spinToStop',
      'duration': 5,
      'spins': 8
    }
  });

  export default Wheel;`

I also tried creating a React Wheel Component, but that didn't work either:

   `import React from 'react';
    import { Winwheel } from 'winwheel';

   class Wheel extends React.Component {
      constructor() {
      super();
      this.wheel = new Winwheel({
        'numSegments': 4,
        'segments':
            [
                { 'fillStyle': '#eae56f', 'text': 'Prize One' },
                { 'fillStyle': '#89f26e', 'text': 'Prize Two' },
                { 'fillStyle': '#7de6ef', 'text': 'Prize Three' },
                { 'fillStyle': '#e7706f', 'text': 'Prize Four' }
            ],
        'animation':
        {
            'type': 'spinToStop',
            'duration': 5,
            'spins': 8
            }
        });

       }

    render() {
      return (
        <div>{this.wheel}</div>
      )
    }


   }

   export default Wheel;`

here is the error message:

Objects are not valid as a React child (found: object with keys {canvasId, centerX, centerY, outerRadius, innerRadius, numSegments, drawMode, rotationAngle, textFontFamily, textFontSize, textFontWeight, textOrientation, textAlignment, textDirection, textMargin, textFillStyle, textStrokeStyle, textLineWidth, fillStyle, strokeStyle, lineWidth, clearTheCanvas, imageOverlay, drawText, pointerAngle, wheelImage, imageDirection, segments, animation, canvas, ctx, pointerGuide}). If you meant to render a collection of children, use an array instead.

Upvotes: 2

Views: 1173

Answers (1)

Romer Rios
Romer Rios

Reputation: 11

You are getting that error because of trying render an object as react component, it is not possible. Following the documentation of Winwheel.js I found that it requires to be run to create the wheel in the canvas element. What you can do is: 

import React, { Component } from "react";
import Winwheel from "winwheel";

class Dashboard extends Component {
  componentDidMount() {
    const theWheel = new Winwheel({
      canvasId: "myCanvas",
      numSegments: 4,
      segments: [
        { fillStyle: "#eae56f", text: "Prize One" },
        { fillStyle: "#89f26e", text: "Prize Two" },
        { fillStyle: "#7de6ef", text: "Prize Three" },
        { fillStyle: "#e7706f", text: "Prize Four" },
      ],
      animation: {
        type: "spinToStop",
        duration: 5,
        spins: 8,
      },
    });
  }

  render() {
    return <canvas id="myCanvas" width="880" height="300"></canvas>;
  }
}

export default Dashboard;

or: 

import React, { useEffect } from "react";
import Winwheel from "winwheel";
const Dashboard = () => {
  useEffect(() => {
    const theWheel = new Winwheel({});
  }, []);
  return <canvas id="myCanvas" width="880" height="300"></canvas>;
};

export default Dashboard;

Upvotes: 1

Related Questions