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.
Source: stackoverflow.com
Related Query
- How to import this old library called TagCanvas?
- Demo: how to import this micromodal library
- How do I import Ant Design React UI library and css?
- How to import a JS Library within my React app?
- How to use import this npm package?
- How to import Bootstrap library in Kotlin-React-App
- Invalid hook call. Hooks can only be called inside... how to fix this maintaining the react class component
- How to test this component with react testing library - just a starter with this new testing library
- How can I use this React library with React-Rails
- How to prevent useEffect in customHook being called with every import of custom hook?
- How to think in React for this example: Should I store repetitive html markup in an Array and import it into a class component?
- How to use Root Import with React Testing Library in React?
- How to create a local react library project with common components, and import that project locally
- how to import whole Material UI library in React JS
- How to mock a nested component import in react js and test using react testing library
- How to import an external library into a ReactJS Application (Locally)
- How to import JS library and script to React project?
- How do I import this toast component to my button?
- How can I check if signOut was called in this test with Jest?
- how to import components from a Stencil library in a React app?
- How do I import this interface from the React-Particles-JS library?
- How to resolve "Cannot use import statement outside a module" in jest
- How to import and export components using React + ES6 + webpack?
- How to import a CSS file in a React Component
- How to test a className with the Jest and React testing library
- How to import image (.svg, .png ) in a React Component
- How do you import a javascript package from a cdn/script tag in React?
- How to make React CSS import component-scoped?
- setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op
- How to import CSS modules with Typescript, React and Webpack
More Query from same tag
- React - Access or assign data object directly to Field component for FieldArray
- Gulp, Uncaught SyntaxError: Unexpected token <
- Warning: Encountered two children with the same key, `0`
- How to specify return type as a list of React components with Flow
- How to use ReactRouter CDN way without npm require?
- react select styles and typescript
- Removing a file from an array of files on click with react.js
- Updating multiple values in graphQL apollo mutation
- How to do 2 or more "FIND" (mongo) request in node in the same route?
- Modal is not popping up on clicking the button
- Any way to use immutable.js with lodash?
- React useState callback when updating in useEffect is not an option
- Using sinon for axios.put or post
- Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'
- D3 stack() skipping first object in my data array
- ReactJs: Load More pagination type (append)
- it show nothing REACT
- Getting CORS error in ReactJS app when attempting to execute localhost API
- React App Login Error : Maximum update depth exceeded
- Function for updating state variable in class component in React
- Cannot resize an SVG image in React Native app
- How do I unload components?
- How to "Hide a div by clicking alert box ok button" in reactjs
- React Transferring Props except one
- Preventing Unnecessary Requests when update the input
- React-Modal navigates on close
- Javascript / React - Question about .focus() behaviour
- Unable to dynamically render custom react components properly after fetching from backend
- Keystone/Apollo/React: 1 useMutation for several creations issue
- React router v5 renders only index page on all routes