https://github.com/obss/react-curved-text
A React addon for creating circular / curved texts in React projects.
https://github.com/obss/react-curved-text
circular-textview curved-text elliptic-curve-cryptography elliptic-curves react-curved-text
Last synced: 5 months ago
JSON representation
A React addon for creating circular / curved texts in React projects.
- Host: GitHub
- URL: https://github.com/obss/react-curved-text
- Owner: obss
- License: mit
- Created: 2022-09-22T11:17:29.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T06:49:26.000Z (about 1 year ago)
- Last Synced: 2025-05-13T00:49:28.616Z (5 months ago)
- Topics: circular-textview, curved-text, elliptic-curve-cryptography, elliptic-curves, react-curved-text
- Language: JavaScript
- Homepage: https://obss.github.io/react-curved-text/
- Size: 9.24 MB
- Stars: 39
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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
```shell
yarn add react-curved-text
```
or
```shell
npm install react-curved-text
```
## Usage
```js
import ReactCurvedText from 'react-curved-text';
const MyComponent = () => {
return (
);
};
export default MyComponent;
```
## Examples
Checkout live examples on [react-curved-text-demo](https://obss.github.io/react-curved-text) page for various customizations.
Checkout a [Live Example with Rotate Animation](https://stackblitz.com/edit/react-curved-text-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 |