How to create a curved text with React?

Question

In my react app i wanted to create a circular/curved text. for this i found a package called react-curved-text. but this package is not working as i wanted.

the thing is it curves the text, but it doesn't align itself with the parent, and when i try to apply animation to it using tailwindcss it doesn't work. it can not be added a classname to it. so how can i create circular text using react?

<ReactCurvedText
          width={370}
          height={300}
          cx={190}
          cy={120}
          rx={80}
          ry={80}
          startOffset={0}
          reversed={true}
          text="Sanah Shop - Sanah shop - Sanah shop - Sanah shop - "
          textProps={{ style: { fontSize: 20.5, transform: "rotate(0deg)" } }}
          className="rotater absolute top-0 bottom-10"
        />

tailwind.config.js

theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(360deg)" },
          "50%": { transform: "rotate(0deg)" },
        },
        spinner: {
          "0%": { transform: "rotate(360deg)" },
          "100%": { transform: "rotate(0deg)" },
        },
      },
      animation: {
        rotater: "spinner 10s linear infinite",
        wiggle: "wiggle 10s linear infinite",
      },
    },
  },

the final result should be

I doubt there are many questions covering this in React, but it's not really a React problem. You should be able to find some good JS/CSS questions and build a React component based on those. E.g. https://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas — DBS, Feb 23 '23 at 09:49
i'm doing the animation part correctly. what i can't do is to curve the text — Mohammed Bekele, Feb 23 '23 at 09:52

score 0 · Answer 1 · answered Mar 06 '23 at 08:48

You need to add the className via the svgProps of ReactCurvedText parameter like this:

svgProps={{ className: "rotater absolute top-0 bottom-10" }}

You can take a look at this sandbox for a live working example of animated curved text using react-curved-text library.

How to create a curved text with React?

1 Answers1