score:0

i had some issues implementing the snehil's solution, so here's how i solved it.

i loaded the minified.js (tagcanvas.min.js) in my <head> and i implemented useeffect to apply the js that would populate the canvas.

import head from 'next/head';
import react, { useeffect } from "react";
import skillsstyles from "../styles/skills.module.css"

const skills = [
    { href: "#git_", title: "git" },
    { href: "#json_", title: "json" },
    { href: "#solidity_", title: "solidity" },
    { href: "#html_", title: "html" },
    { href: "#react_", title: "react" },
    { href: "#python_", title: "python" },
    { href: "#sql_", title: "sql" },
    { href: "#shopify_", title: "shopify" },
    { href: "#aws_", title: "aws" },
    { href: "#wordpress_", title: "wordpress" },
    { href: "#npm_", title: "npm" },
    { href: "#css_", title: "css" },
    { href: "#jquery_", title: "jquery" },
    { href: "#js_", title: "javascript" },
    { href: "#c++_", title: "c++" },
    { href: "#java_", title: "java" },
    { href: "#php_", title: "php" },
    { href: "#selenium_", title: "selenium" },
    { href: "#remix_", title: "remix" },
    { href: "#ganache_", title: "ganache" },
    { href: "#hubspot_", title: "hubspot" },
    { href: "#node.js_", title: "node.js" },
    { href: "#hiveos_", title: "hiveos" },
    { href: "#crypto_", title: "crypto" },
    { href: "#mining_", title: "mining" },
    { href: "#photoshop_", title: "photoshop" },
    { href: "#illustrator_", title: "illustrator" },
    { href: "#premier-pro_", title: "premier pro" },
    { href: "#truffle_", title: "truffle" },
    { href: "#pyqt_", title: "pyqt" },
    { href: "#hardhat_", title: "hardhat" }
];

export const skills = () => {

    useeffect(() => {
        console.log("loading tagcanvas...");

        tagcanvas.wheelzoom = false;
        tagcanvas.textfont = "raleway, sans-serif";
        tagcanvas.textcolour = "white";
        tagcanvas.textheight = 26;
        tagcanvas.outlinemethod = "size";
        tagcanvas.outlineincrease = 10;
        tagcanvas.maxspeed = 0.03;
        tagcanvas.minbrightness = 0.2;
        tagcanvas.depth = 0.92;
        tagcanvas.pulsateto = 0.6;
        tagcanvas.initial = [0.1, -0.1];
        tagcanvas.decel = 0.98;
        tagcanvas.reverse = true;
        tagcanvas.hidetags = false;
        tagcanvas.shadow = false;
        tagcanvas.shadowblur = 3;
        tagcanvas.weight = false;
        tagcanvas.imagescale = null;
        tagcanvas.fadein = 1000;
        tagcanvas.clicktofront = 600;
        tagcanvas.width = window.innerwidth;
        tagcanvas.height = window.innerheight;

        try {
            tagcanvas.start("tagcanvas", "taglist");
        } catch (e) {
            console.log("canvas error.");
            console.log(e);
        }
    }, [])

    return (
        <>
            <head>
                <script type="text/javascript" src="/utils/tagcanvas.min.js"></script>
            </head>

            <div id="skill-sphere" classname={`${skillsstyles.tagcanvas} flex`}>
                <canvas
                    id="tagcanvas"
                    width="820"
                    height="600"
                    style={{
                        maxwidth: '1000px',
                        width: '100%',
                        zindex: '99',
                        position: 'relative',
                        margin: '0 auto'
                    }}
                    classname="to-fade-in fast-anim"
                >
                </canvas>
            </div>
            <div id="taglist" style={{ display: 'none' }}>
                <ul>
                    {skills.map(skill => (
                        <li key={skill.title}><a href={skill.href}>{skill.title}</a></li>
                    ))}
                </ul>
            </div>
        </>
    )
}

score:0

add the script in the html head section:

<script type="text/javascript" src="/utils/tagcanvas.min.js"></script>

now, inside the react functional component:

import { useeffect } from 'react';

const skills = [
  { href: '#git_', title: 'git' },
  { href: '#json_', title: 'json' },
  { href: '#solidity_', title: 'solidity' },
  { href: '#html_', title: 'html' },
  { href: '#react_', title: 'react' },
  { href: '#python_', title: 'python' },
];

const skills = ({ ...rest }) => {
  useeffect(() => {
    console.log('loading tagcanvas...');
    const tagcanvas = window.tagcanvas;
    const tagcanvasoptions = {
      textcolour: '#08fdd8',
      outlinethickness: 0.5,
      outlinecolour: '#fe0853',
      maxspeed: 0.06,
      freezeactive: true,
      shuffletags: true,
      shape: 'sphere',
      zoom: 0.8,
      wheelzoom: false,
      noselect: true,
      textfont: null,
      freezedecel: true,
      fadein: 3000,
      initial: [0.3, -0.1],
      depth: 1.1,
    };
    try {
      tagcanvas.start('tagcanvas', 'taglist', tagcanvasoptions);
    } catch (e) {
      console.log('canvas error.');
      console.log(e);
    }
  }, []);

  return (
      <div classname='container'>
        <canvas
          id='tagcanvas'
          width='820'
          height='600'
          style={{
            maxwidth: '1000px',
            width: '100%',
            zindex: '99',
            position: 'relative',
            margin: '0 auto',
          }}
          classname='to-fade-in fast-anim'
        ></canvas>
        <div id='taglist' style={{ display: 'none' }}>
          <ul>
            {skills.map((skill) => (
              <li key={skill.title}>
                <a href={skill.href}>{skill.title}</a>
              </li>
            ))}
          </ul>
        </div>
      </div>
  );
};

export default skills;

score:4

i know you asked this long back but since i was facing the same problem, here's how i solved it.

so the problem is that we cannot import the tagcanvas.js file any of the conventional import statements because it is written as a bunch of function definitions that are get executed when import through tag. that way you're able to call those functions from vanilla js, eg tagcanvas.start(). here's what you can do instead.

link the js file to your index.html using tag.

<script src="/js/tagcanvas.js"></script>

now since you're not importing the library from a react component, your useeffect will give an error because tagcanvas is not defined in the scope. we can use a neat js trick here which is the eval() function. the eval function accepts a code snippet as a string and executes it in the browser.

useeffect(() => {
  eval(
    `try {
       tagcanvas.start(
         'mycanvas',
         '',
         {textcolour: '${props.theme.fontprimary}',outlinecolour: '#0000'}
       );
     }
     catch(e) {
       document.getelementbyid('mycanvascontainer').style.display = 'none';
     }`
   );
}, [props.theme]);

this also gives you the flexibility to re-render the canvas from states and props like in the example above.


Related Query

More Query from same tag