JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1864
  • Score
    100M100P100Q108975F
  • License MIT

A library for creating circular / curved texts in React projects

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.

examplegif

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={370}
      height={300}
      cx={190}
      cy={120}
      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

Edit form-quickstart

Checkout live examples on react-validatable-form-demo page for various customizations.

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 |