Using external js library in functional component

Question

I am using the CircleType.js library which allows you to curve a string of text/render it as a circle. However, I am very new to React and I'm not sure how to use the library in React. I created a functional component and used the documentation provided in the CircleType page to create... but I keep getting a 'TypeError: Cannot read property 'innerHTML' of null' error.

import React, {useEffect} from 'react'
import CircleType from 'circletype'

function RotatingCircle() { 

    // const circleOfSkills = new CircleType(document.getElementById('rounded-text'))
    // .radius(100)
    // useEffect(() => {

    //     return () => circleOfSkills.mount()
    //   }, [circleOfSkills])

    return ( 
            <p className="circle" id="rounded-text">
                AND THE WORLD KEEPS GOING AROUND AND AROUND AND AROUND
            </p>
    )
}

export default RotatingCircle

I read that I might need to use refs but I'm really not sure how to use it as all examples I see use class components. Another forum I saw suggested using useEffect, but I'm clearly not using it correctly.

How do I reference DOM elements in a functional component?

Does this answer your question? Moving external library from Class-based to Functional Component in React — Mosh Feu
– Mosh Feu, Commented Aug 26, 2020 at 7:31

Alfred · Accepted Answer · 2020-08-26 07:39:21Z

2

Here is an example of CircleType implementation with React useRef hook. Avoid using getElementById for DOM manipulation as it is not the React way.

Sample code and CodeSandbox link:

import React, { useEffect, useRef } from "react";
import "./styles.css";
import CircleType from "circletype";

export default function App() {
  const circleInstance = useRef();

  useEffect(() => {
    new CircleType(circleInstance.current).radius(100);
  }, []);

  return (
    <div className="App">
      <div ref={circleInstance}>abcdef</div>
    </div>
  );
}

CodeSandbox

answered Aug 26, 2020 at 7:39

Alfred

6845 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zouhair · Accepted Answer · 2020-08-26 07:24:52Z

2

try this

    useEffect(() => {
   const circleOfSkills = new CircleType(document.getElementById('rounded-text'))
   .radius(100)
   return circleOfSkills.mount()
 }, []);

answered Aug 26, 2020 at 7:24

zouhair

711 silver badge8 bronze badges

Comments

habbahans · Accepted Answer · 2020-08-26 07:13:49Z

1

Try moving the const inside useEffect like this:

 useEffect(() => {
   const circleOfSkills = new CircleType(document.getElementById('rounded-text'))
   .radius(100)
   return () => circleOfSkills.mount()
 }, []);

Calling getElementById outside of useEffect will give you null error because the element is not yet rendered on the page.

answered Aug 26, 2020 at 7:13

habbahans

1321 silver badge6 bronze badges

Comments

Greg M · Accepted Answer · 2020-08-26 07:24:13Z

0

When using react I'd avoid using getElementbyID inside your components. Defining a root in your index.html and then linking it in index.js by

import React from "react";
import ReactDOM from "react-dom";
import App from "./App"; //App is your base react component

ReactDOM.render(
   <App />
  document.getElementById("root")
);

It will save you headaches like this and others in the future. React components are like a tree and by defining only one root you are utilizing what react was built for.

answered Aug 26, 2020 at 7:24

Greg M

4052 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using external js library in functional component

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related