Create Curved Text In React

A highly customizable React component to create curved text in your applications.

How to use it:

1. Install and import the ReactCurvedText component.

# Yarn
$ yarn add react-curved-text

# NPM
$ npm i react-curved-text
import ReactCurvedText from "react-curved-text";

2. Add the ReactCurvedText to the app and define the text as follows:

const MyComponent = () => {
  return (
    <ReactCurvedText
      text="ReactScriptCom"
    />
  );
};

3. Customize the curved text.

<ReactCurvedText
  width={370}
  height={300}
  cx="196"
  cy="204"
  rx={100}
  ry={100}
  startOffset={20}
  reversed={true}
  text="ReactScriptCom"
  textProps={{ style: { fontSize: '25' } }}
  tspanProps={{ dy: '-20' }}
/>

Preview:

Create Curved Text In React

Download Details:

Author: obss

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/obss/react-curved-text

License: MIT

Add Comment