react-curved-text

react-curved-text a library for creating circular / curved texts in React projects.

Installation

react-curved-text requires:

• React 18.0.0 or later

yarn add react-curved-text

or

npm install react-curved-text

Usage

import ReactCurvedText from 'react-curved-text';

const MyComponent = () => {
    return (
        <ReactCurvedText
            width={300}
            height={300}
            cx={150}
            cy={150}
            rx={100}
            ry={100}
            startOffset={50}
            reversed={false}
            text="react-curved-text"
            textProps={{ style: { fontSize: 24 } }}
            textPathProps={null}
            tspanProps={null}
            ellipseProps={null}
            svgProps={null}
        />
    );
};

export default MyComponent;

Examples

Checkout live examples on react-curved-text-demo page for various customizations.

Checkout a Live Example with Rotate Animation.

API

| Prop | Type | Required | Description | | ----------------- | -------- | ------------ | ------------------------------------------ | | text | string | yes | Text to be displayed | | width | number | yes | Width of the SVG | | height | number | yes | Height of the SVG | | cx | number | yes | Center x of the ellipse | | cy | number | yes | Center y of the ellipse | | rx | number | yes | Radius x of the ellipse | | ry | number | yes | Radius y of the ellipse | | startOffset | number | no | Start offset of the text | | reversed | boolean | no | Reverse the text path | | textProps | object | no | Props to be passed to the text element | | textPathProps | object | no | Props to be passed to the textPath element | | tspanProps | object | no | Props to be passed to the tspan element | | ellipseProps | object | no | Props to be passed to the ellipse element | | svgProps | object | no | Props to be passed to the svg element |