Package Exports
- react-curved-text
 - react-curved-text/dist/index.es.js
 - react-curved-text/dist/index.js
 
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-curved-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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-textor
npm install react-curved-textUsage
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 |