├── .env ├── .eslintrc.json ├── .github └── workflows │ └── node.js.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── .vscode └── settings.json ├── .yarn └── releases │ └── yarn-4.1.0.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── index.html ├── package.json ├── public ├── curved-text-example.png ├── favicon.png ├── github.png ├── logo.png ├── logo192.png ├── logo512.png ├── manifest.json ├── npm.png ├── obss.png └── robots.txt ├── rollup.config.js ├── src ├── App.css ├── App.jsx ├── HeaderInfo.jsx ├── index.css ├── lib │ ├── ControlUtils.js │ ├── ReactCurvedText.jsx │ └── index.js └── main.jsx ├── vite.config.ts └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | VITE_REACT_APP_VERSION=$npm_package_version 2 | VITE_REACT_APP_NAME=$npm_package_name -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true, 6 | "jest": true 7 | }, 8 | "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"], 9 | "parser": "@babel/eslint-parser", 10 | "parserOptions": { 11 | "ecmaFeatures": { 12 | "jsx": true 13 | }, 14 | "ecmaVersion": 12, 15 | "requireConfigFile": false, 16 | "sourceType": "module" 17 | }, 18 | "plugins": ["react", "prettier", "react-hooks"], 19 | "rules": { 20 | "react/jsx-fragments": ["error", "syntax"], 21 | "react/prop-types": "off", 22 | "import/prefer-default-export": "off", 23 | "react/react-in-jsx-scope": "off", 24 | "react-hooks/rules-of-hooks": "error", 25 | "react-hooks/exhaustive-deps": "off", 26 | "react/display-name": "off", 27 | "react/jsx-filename-extension": [ 28 | 1, 29 | { 30 | "extensions": [".js", ".jsx"] 31 | } 32 | ], 33 | "react/jsx-props-no-spreading": "off", 34 | "jsx-a11y/anchor-is-valid": "off" 35 | }, 36 | "settings": { 37 | "react": { 38 | "version": "detect" 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [master] 9 | pull_request: 10 | branches: [master] 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | matrix: 18 | node-version: [20.10.0] 19 | 20 | steps: 21 | - uses: actions/checkout@v3 22 | - name: Use Node.js ${{ matrix.node-version }} 23 | uses: actions/setup-node@v3 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | - name: Update yarn @v2 27 | run: corepack enable 28 | - run: corepack prepare yarn@4.1.0 --activate 29 | - run: yarn -v 30 | - name: Install dependencies 31 | run: rm -rf node_modules && yarn install 32 | - run: npm run build-storybook 33 | - run: touch ./storybook-dist/.nojekyll 34 | 35 | - name: Deploy 🚀 36 | uses: JamesIves/github-pages-deploy-action@v4.2.5 37 | with: 38 | branch: gh-pages # The branch the action should deploy to. 39 | folder: storybook-dist # The folder the action should deploy. 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | react-curved-text.iml 3 | /dist 4 | stats.html 5 | /node_modules 6 | /build 7 | /storybook-dist 8 | 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | .pnp.* 14 | .yarn/* 15 | !.yarn/patches 16 | !.yarn/plugins 17 | !.yarn/releases 18 | !.yarn/sdks 19 | !.yarn/versions 20 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | rollup.config.js -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 4, 4 | "printWidth": 120, 5 | "arrowParens": "always", 6 | "proseWrap": "preserve", 7 | "semi": true, 8 | "singleQuote": true, 9 | "endOfLine": "auto" 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true 4 | } 5 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | enableGlobalCache: false 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: .yarn/releases/yarn-4.1.0.cjs 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Citizen Code of Conduct 2 | 3 | ## 1. Purpose 4 | 5 | A primary goal of react-curved-text is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof). 6 | 7 | This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior. 8 | 9 | We invite all those who participate in react-curved-text to help us create safe and positive experiences for everyone. 10 | 11 | ## 2. Open [Source/Culture/Tech] Citizenship 12 | 13 | A supplemental goal of this Code of Conduct is to increase open [source/culture/tech] citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community. 14 | 15 | Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society. 16 | 17 | If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know. 18 | 19 | ## 3. Expected Behavior 20 | 21 | The following behaviors are expected and requested of all community members: 22 | 23 | * Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community. 24 | * Exercise consideration and respect in your speech and actions. 25 | * Attempt collaboration before conflict. 26 | * Refrain from demeaning, discriminatory, or harassing behavior and speech. 27 | * Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential. 28 | * Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations. 29 | 30 | ## 4. Unacceptable Behavior 31 | 32 | The following behaviors are considered harassment and are unacceptable within our community: 33 | 34 | * Violence, threats of violence or violent language directed against another person. 35 | * Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language. 36 | * Posting or displaying sexually explicit or violent material. 37 | * Posting or threatening to post other people's personally identifying information ("doxing"). 38 | * Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability. 39 | * Inappropriate photography or recording. 40 | * Inappropriate physical contact. You should have someone's consent before touching them. 41 | * Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances. 42 | * Deliberate intimidation, stalking or following (online or in person). 43 | * Advocating for, or encouraging, any of the above behavior. 44 | * Sustained disruption of community events, including talks and presentations. 45 | 46 | ## 5. Weapons Policy 47 | 48 | No weapons will be allowed at react-curved-text events, community spaces, or in other spaces covered by the scope of this Code of Conduct. Weapons include but are not limited to guns, explosives (including fireworks), and large knives such as those used for hunting or display, as well as any other item used for the purpose of causing injury or harm to others. Anyone seen in possession of one of these items will be asked to leave immediately, and will only be allowed to return without the weapon. Community members are further expected to comply with all state and local laws on this matter. 49 | 50 | ## 6. Consequences of Unacceptable Behavior 51 | 52 | Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated. 53 | 54 | Anyone asked to stop unacceptable behavior is expected to comply immediately. 55 | 56 | If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event). 57 | 58 | ## 7. Reporting Guidelines 59 | 60 | If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. aekilinc@gmail.com. 61 | 62 | 63 | 64 | Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress. 65 | 66 | ## 8. Addressing Grievances 67 | 68 | If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify OBSS with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies. 69 | 70 | 71 | 72 | ## 9. Scope 73 | 74 | We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues--online and in-person--as well as in all one-on-one communications pertaining to community business. 75 | 76 | This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members. 77 | 78 | ## 10. Contact info 79 | 80 | aekilinc@gmail.com 81 | 82 | ## 11. License and attribution 83 | 84 | The Citizen Code of Conduct is distributed by [Stumptown Syndicate](http://stumptownsyndicate.org) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/). 85 | 86 | Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy). 87 | 88 | _Revision 2.3. Posted 6 March 2017._ 89 | 90 | _Revision 2.2. Posted 4 February 2016._ 91 | 92 | _Revision 2.1. Posted 23 June 2014._ 93 | 94 | _Revision 2.0, adopted by the [Stumptown Syndicate](http://stumptownsyndicate.org) board on 10 January 2013. Posted 17 March 2013._ 95 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | You are welcome to update this repository. 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Open Business Software Solutions 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-curved-text 2 | 3 | > react-curved-text a library for creating circular / curved texts in React projects. 4 | 5 | exampletext 6 | 7 | ## Installation 8 | 9 | **react-curved-text** requires: 10 | 11 | - React **18.0.0** or later 12 | 13 | ```shell 14 | yarn add react-curved-text 15 | ``` 16 | 17 | or 18 | 19 | ```shell 20 | npm install react-curved-text 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```js 26 | import ReactCurvedText from 'react-curved-text'; 27 | 28 | const MyComponent = () => { 29 | return ( 30 | 46 | ); 47 | }; 48 | 49 | export default MyComponent; 50 | ``` 51 | 52 | ## Examples 53 | 54 | 55 | Checkout live examples on [react-curved-text-demo](https://obss.github.io/react-curved-text) page for various customizations. 56 | 57 | Checkout a [Live Example with Rotate Animation](https://stackblitz.com/edit/react-curved-text-animation). 58 | 59 | 60 | ## API 61 | 62 | | **Prop** | **Type** | **Required** | **Description** | 63 | | ----------------- | -------- | ------------ | ------------------------------------------ | 64 | | **text** | string | yes | Text to be displayed | 65 | | **width** | number | yes | Width of the SVG | 66 | | **height** | number | yes | Height of the SVG | 67 | | **cx** | number | yes | Center x of the ellipse | 68 | | **cy** | number | yes | Center y of the ellipse | 69 | | **rx** | number | yes | Radius x of the ellipse | 70 | | **ry** | number | yes | Radius y of the ellipse | 71 | | **startOffset** | number | no | Start offset of the text | 72 | | **reversed** | boolean | no | Reverse the text path | 73 | | **textProps** | object | no | Props to be passed to the text element | 74 | | **textPathProps** | object | no | Props to be passed to the textPath element | 75 | | **tspanProps** | object | no | Props to be passed to the tspan element | 76 | | **ellipseProps** | object | no | Props to be passed to the ellipse element | 77 | | **svgProps** | object | no | Props to be passed to the svg element | 78 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-react', 4 | [ 5 | '@babel/preset-env', 6 | { 7 | targets: { 8 | node: 'current', 9 | }, 10 | }, 11 | ], 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | React Curved Text 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-curved-text", 3 | "version": "3.0.1", 4 | "description": "A library for creating circular / curved texts in React projects", 5 | "keywords": [ 6 | "react", 7 | "curved text", 8 | "curved", 9 | "circular", 10 | "arc" 11 | ], 12 | "main": "dist/index.js", 13 | "module": "dist/index.es.js", 14 | "jsnext:main": "dist/index.es.js", 15 | "scripts": { 16 | "build": "rimraf dist && rollup -c --environment NODE_ENV:production", 17 | "start": "rimraf dist && rollup -c -w --environment NODE_ENV:development", 18 | "prepublishOnly": "npm run build", 19 | "start-storybook": "vite --port 3183", 20 | "preview-storybook": "vite preview", 21 | "build-storybook": "vite build" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/obss/react-curved-text.git" 26 | }, 27 | "homepage": "https://obss.github.io/react-curved-text", 28 | "license": "MIT", 29 | "author": "ahmetemrekilinc", 30 | "peerDependencies": { 31 | "react": ">=18.0.0", 32 | "react-dom": ">=18.0.0" 33 | }, 34 | "devDependencies": { 35 | "@babel/core": "7.19.0", 36 | "@babel/eslint-parser": "7.18.9", 37 | "@babel/plugin-proposal-class-properties": "7.18.6", 38 | "@babel/plugin-proposal-function-bind": "7.18.9", 39 | "@babel/plugin-transform-react-jsx": "7.19.0", 40 | "@babel/preset-env": "7.19.0", 41 | "@babel/preset-react": "7.18.6", 42 | "@rollup/plugin-babel": "5.3.1", 43 | "@rollup/plugin-commonjs": "22.0.2", 44 | "@rollup/plugin-json": "4.1.0", 45 | "@rollup/plugin-node-resolve": "14.0.1", 46 | "@rollup/plugin-replace": "4.0.0", 47 | "@vitejs/plugin-react": "^4.0.4", 48 | "eslint": "8.23.1", 49 | "eslint-config-prettier": "8.5.0", 50 | "eslint-plugin-prettier": "4.2.1", 51 | "eslint-plugin-react": "7.32.2", 52 | "eslint-plugin-react-hooks": "4.6.0", 53 | "jsx-to-string": "1.4.0", 54 | "prettier": "2.7.1", 55 | "react": "18.2.0", 56 | "react-dom": "18.2.0", 57 | "rollup": "2.79.0", 58 | "rollup-plugin-node-builtins": "2.1.2", 59 | "rollup-plugin-node-globals": "1.4.0", 60 | "rollup-plugin-peer-deps-external": "2.2.4", 61 | "rollup-plugin-terser": "7.0.2", 62 | "rollup-plugin-visualizer": "5.8.1", 63 | "vite": "^4.4.5" 64 | }, 65 | "dependencies": { 66 | "svg-path-commander": "1.0.5" 67 | }, 68 | "files": [ 69 | "dist" 70 | ], 71 | "browserslist": { 72 | "production": [ 73 | ">0.2%", 74 | "not dead", 75 | "not op_mini all" 76 | ], 77 | "development": [ 78 | "last 1 chrome version", 79 | "last 1 firefox version", 80 | "last 1 safari version" 81 | ] 82 | }, 83 | "packageManager": "yarn@4.1.0" 84 | } 85 | -------------------------------------------------------------------------------- /public/curved-text-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/curved-text-example.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/favicon.png -------------------------------------------------------------------------------- /public/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/github.png -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React Curved Text", 3 | "name": "React Curved Text", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/npm.png -------------------------------------------------------------------------------- /public/obss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/obss/react-curved-text/a027c3654dc96bd38cbab76f6c47b14050de66f0/public/obss.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from '@rollup/plugin-babel'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import external from 'rollup-plugin-peer-deps-external'; 4 | import resolve from '@rollup/plugin-node-resolve'; 5 | import pkg from './package.json'; 6 | import json from '@rollup/plugin-json'; 7 | import builtins from 'rollup-plugin-node-builtins'; 8 | import globals from 'rollup-plugin-node-globals'; 9 | import { terser } from "rollup-plugin-terser"; 10 | import replace from '@rollup/plugin-replace'; 11 | import visualizer from 'rollup-plugin-visualizer'; 12 | 13 | const PRODUCTION = (process.env.NODE_ENV === "production"); 14 | 15 | export default [ 16 | { 17 | input: 'src/lib/index.js', 18 | output: [ 19 | { 20 | file: pkg.module, 21 | format: 'esm', 22 | globals: { 23 | 'react': 'react', 24 | 'react-dom': 'react-dom' 25 | } 26 | }, 27 | { 28 | file: pkg["main"], 29 | format: 'umd', 30 | globals: { 31 | 'react': 'react', 32 | 'react-dom': 'react-dom' 33 | }, 34 | name: 'index.js' 35 | }], 36 | plugins: [ 37 | replace({ 38 | 'process.env.NODE_ENV': JSON.stringify(PRODUCTION ? "production" : "development") 39 | }), 40 | external(), 41 | babel({ 42 | babelrc: false, 43 | exclude: 'node_modules/**', 44 | plugins: [ 45 | "@babel/plugin-proposal-function-bind", 46 | "@babel/plugin-proposal-class-properties" 47 | ], 48 | presets: [ 49 | ["@babel/preset-env", {"targets": { "node": "current" }}], 50 | "@babel/preset-react" 51 | ] 52 | }), 53 | resolve({ 54 | mainFields: ["browser", "jsnext", 'module', 'main'] 55 | }), 56 | commonjs({ 57 | // non-CommonJS modules will be ignored, but you can also 58 | // specifically include/exclude files 59 | include: 'node_modules/**', // Default: undefined 60 | // these values can also be regular expressions 61 | // include: /node_modules/ 62 | 63 | // search for files other than .js files (must already 64 | // be transpiled by a previous plugin!) 65 | extensions: [ '.js', '.jsx', '.coffee' ], // Default: [ '.js' ] 66 | 67 | // if true then uses of `global` won't be dealt with by this plugin 68 | ignoreGlobal: false, // Default: false 69 | 70 | // if false then skip sourceMap generation for CommonJS modules 71 | sourceMap: false, // Default: true 72 | 73 | // sometimes you have to leave require statements 74 | // unconverted. Pass an array containing the IDs 75 | // or a `id => boolean` function. Only use this 76 | // option if you know what you're doing! 77 | ignore: [ 'conditional-runtime-dependency' ] 78 | }), 79 | json(), 80 | globals(), 81 | builtins(), 82 | (PRODUCTION ? terser({ 83 | compress: { 84 | drop_debugger: true 85 | } 86 | }) : null), 87 | (PRODUCTION ? visualizer({gzipSize: true}) : null) 88 | ] 89 | } 90 | ] 91 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .header-div { 2 | position: absolute; 3 | right: 0px; 4 | display: flex; 5 | align-items: center; 6 | column-gap: 10px; 7 | float: right; 8 | margin-right: 80px; 9 | background-color: white; 10 | } 11 | 12 | .logo-div { 13 | position: absolute; 14 | } 15 | 16 | .logo-div > a > img { 17 | width: 15vw; 18 | height: 15vw; 19 | } 20 | 21 | .exampleDemo { 22 | text-align: center; 23 | display: flex; 24 | flex-direction: column; 25 | } 26 | 27 | .installationDiv { 28 | background-color: lightgray; 29 | margin: auto; 30 | width: 300px; 31 | max-width: 100vw; 32 | } 33 | 34 | .exampleWrapperDiv { 35 | border: 8px solid; 36 | border-image: linear-gradient(45deg, turquoise, greenyellow) 1; 37 | width: fit-content; 38 | height: fit-content; 39 | margin: auto; 40 | } 41 | 42 | .settingsDiv { 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | } 47 | 48 | .settingsItem { 49 | max-width: 90vw; 50 | margin-top: 10px; 51 | width: 600px; 52 | display: flex; 53 | } 54 | 55 | .settingsItem > label { 56 | width: 70%; 57 | height: 30px; 58 | float: left; 59 | } 60 | 61 | .settingsItem > input { 62 | height: 30px; 63 | float: right; 64 | } 65 | 66 | .settingsItem > input[type='text'] { 67 | width: 65%; 68 | } 69 | 70 | .settingsItem > input[type='checkbox'] { 71 | width: 65%; 72 | } 73 | 74 | .settingsItem > input[type='color'] { 75 | width: 65%; 76 | } 77 | 78 | .settingsItem > input[type='number'] { 79 | width: 25%; 80 | } 81 | 82 | .settingsItem > input[type='range'] { 83 | width: 40%; 84 | } 85 | 86 | .currentJsxDiv { 87 | margin-top: 50px; 88 | max-width: 500px; 89 | margin-left: auto; 90 | margin-right: auto; 91 | } 92 | 93 | .currentJsxDiv span { 94 | background-color: lightgrey; 95 | margin-left: 10px; 96 | white-space: pre; 97 | text-align: left; 98 | float: left; 99 | } 100 | 101 | .demoLinkDiv { 102 | margin-top: 20px; 103 | } 104 | 105 | .apiDiv { 106 | margin-bottom: 50px; 107 | } 108 | 109 | .apiTable { 110 | width: 90%; 111 | } 112 | 113 | .apiTable, 114 | .apiTable th, 115 | .apiTable td { 116 | margin: auto; 117 | border: 1px solid black; 118 | text-align: left; 119 | } 120 | 121 | .obssTriangle { 122 | width: 0; 123 | height: 0; 124 | border-style: solid; 125 | position: fixed; 126 | top: 0; 127 | right: 0; 128 | z-index: 1; 129 | border-width: 0 75px 75px 0; 130 | border-color: transparent #1975d2 transparent transparent; 131 | } 132 | 133 | .obssTriangle:hover { 134 | border-color: transparent #1565c0 transparent transparent; 135 | } 136 | 137 | .triangleIcon { 138 | position: fixed; 139 | top: 0; 140 | right: 5px; 141 | transform: rotate(45deg); 142 | writing-mode: vertical-lr; 143 | } 144 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import jsxToString from 'jsx-to-string'; 3 | import './App.css'; 4 | import HeaderInfo from './HeaderInfo'; 5 | import ReactCurvedText from './lib'; 6 | 7 | function App() { 8 | const [width, setWidth] = useState(300); 9 | const [height, setHeight] = useState(300); 10 | const [cx, setCx] = useState(150); 11 | const [cy, setCy] = useState(150); 12 | const [rx, setRx] = useState(100); 13 | const [ry, setRy] = useState(100); 14 | const [startOffset, setStartOffset] = useState(50); 15 | const [reversed, setReversed] = useState(false); 16 | const [text, setText] = useState('react-curved-text'); 17 | const [fontSize, setFontSize] = useState(24); 18 | const [textPathFill, setTextPathFill] = useState(); 19 | const [dy, setDy] = useState(0); 20 | const [fill, setFill] = useState(); 21 | const [rotate, setRotate] = useState(0); 22 | 23 | const textProps = fontSize ? { style: { fontSize: fontSize } } : null; 24 | const textPathProps = textPathFill ? { fill: textPathFill } : null; 25 | const tspanProps = dy ? { dy: dy } : null; 26 | const ellipseProps = fill ? { style: `fill: ${fill}` } : null; 27 | const svgProps = rotate ? { style: { transform: `rotate(${rotate}deg)` } } : null; 28 | 29 | const currentJsx = ( 30 | 46 | ); 47 | 48 | let currentJsxString = jsxToString(currentJsx, { 49 | displayName: 'ReactCurvedText', 50 | useFunctionCode: true, 51 | }); 52 | currentJsxString = "import ReactCurvedText from 'react-curved-text';\n\n" + currentJsxString; 53 | return ( 54 |
55 | 56 |
57 |
58 |

59 | 60 | react-curved-text 61 | 62 |

63 | 64 |
65 | 
npm install react-curved-text
66 | 
yarn add react-curved-text
67 |
68 | 69 |

70 | 75 | View on GitHub 76 | 77 |

78 |
{currentJsx}
79 |
80 |
81 | 82 | setText(e.target.value)} /> 83 |
84 |
85 | 86 | setReversed(e.target.checked)} 91 | /> 92 |
93 |
94 | 95 | setStartOffset(e.target.value)} 100 | /> 101 | setStartOffset(e.target.value)} 107 | /> 108 |
109 |
110 | 111 | setWidth(e.target.value)} /> 112 | setWidth(e.target.value)} 118 | /> 119 |
120 |
121 | 122 | setHeight(e.target.value)} /> 123 | setHeight(e.target.value)} 129 | /> 130 |
131 |
132 | 133 | setCx(e.target.value)} /> 134 | setCx(e.target.value)} /> 135 |
136 |
137 | 138 | setCy(e.target.value)} /> 139 | setCy(e.target.value)} /> 140 |
141 |
142 | 143 | setRx(e.target.value)} /> 144 | setRx(e.target.value)} /> 145 |
146 |
147 | 148 | setRy(e.target.value)} /> 149 | setRy(e.target.value)} /> 150 |
151 |
152 | 153 | setFontSize(e.target.value)} 158 | /> 159 | setFontSize(e.target.value)} 165 | /> 166 |
167 |
168 | 169 | setTextPathFill(e.target.value)} 174 | /> 175 |
176 |
177 | 178 | setDy(e.target.value)} /> 179 | setDy(e.target.value)} /> 180 |
181 |
182 | 183 | setFill(e.target.value)} /> 184 |
185 |
186 | 187 | setRotate(e.target.value)} /> 188 | setRotate(e.target.value)} 194 | /> 195 |
196 |
197 |
198 |

Current JSX

199 | {currentJsxString} 200 |
201 | 202 |

LIVE DEMO

203 | 204 | 209 | 214 | 215 |
216 |

API

217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 |
PropTypeRequiredDescription
textstringyesText to be displayed
widthnumberyesWidth of the SVG
heightnumberyesHeight of the SVG
cxnumberyesCenter x of the ellipse
cynumberyesCenter y of the ellipse
rxnumberyesRadius x of the ellipse
rynumberyesRadius y of the ellipse
startOffsetnumbernoStart offset of the text
reversedbooleannoReverse the text path
textPropsobjectnoProps to be passed to the text element
textPathPropsobjectnoProps to be passed to the textPath element
tspanPropsobjectnoProps to be passed to the tspan element
ellipsePropsobjectnoProps to be passed to the ellipse element
svgPropsobjectnoProps to be passed to the svg element
313 |
314 |
315 |
316 | ); 317 | } 318 | 319 | export default App; 320 | -------------------------------------------------------------------------------- /src/HeaderInfo.jsx: -------------------------------------------------------------------------------- 1 | const HeaderInfo = () => { 2 | const versionInfo = `Version: ${import.meta.env.VITE_REACT_APP_VERSION}`; 3 | 4 | return ( 5 | <> 6 |
7 | 8 | logo 9 | 10 |
11 |
12 | 13 | 14 | github_icon 15 | 16 | 17 | 18 | 19 | npm_icon 20 | 21 | 22 | 23 | 24 | {versionInfo} 25 | 26 | 27 |
28 |
29 | 30 | {'obss'} 31 | 32 |
33 | 34 | ); 35 | }; 36 | 37 | export default HeaderInfo; 38 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 4 | 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /src/lib/ControlUtils.js: -------------------------------------------------------------------------------- 1 | export const isNullOrUndefined = (param) => { 2 | const result = param === undefined || param === null; 3 | return result; 4 | }; 5 | -------------------------------------------------------------------------------- /src/lib/ReactCurvedText.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useId, useRef, useState } from 'react'; 2 | import SVGPathCommander from 'svg-path-commander'; 3 | import { isNullOrUndefined } from './ControlUtils'; 4 | 5 | const ReactCurvedText = (props) => { 6 | const { 7 | width, 8 | height, 9 | cx, 10 | cy, 11 | rx, 12 | ry, 13 | startOffset, 14 | reversed, 15 | text, 16 | svgProps, 17 | ellipseProps, 18 | textPathProps, 19 | textProps, 20 | tspanProps, 21 | } = props; 22 | const [rendered, setRendered] = useState(false); 23 | const uniqueId = useId(); 24 | const ellipseId = `ellipse-id${uniqueId.replaceAll(':', '-').substring(0, uniqueId.length - 1)}`; 25 | const svgRef = useRef(); 26 | 27 | useEffect(() => { 28 | if (svgRef.current) { 29 | const myEllipseAttr = { 30 | id: ellipseId, 31 | type: 'ellipse', 32 | rx: rx, 33 | ry: ry, 34 | cx: cx, 35 | cy: cy, 36 | style: 'fill: none;', 37 | ...ellipseProps, 38 | }; 39 | const mySvg = svgRef.current; 40 | const newEllipsePath = SVGPathCommander.shapeToPath(myEllipseAttr, true); 41 | 42 | const alreadyAddedChild = document.getElementById(ellipseId); 43 | if (alreadyAddedChild) { 44 | alreadyAddedChild.remove(); 45 | } 46 | 47 | mySvg.prepend(newEllipsePath); 48 | 49 | if (reversed) { 50 | const currentPath = newEllipsePath.getAttribute('d'); 51 | const pathValueReversed = SVGPathCommander.reversePath(currentPath); 52 | const pathValueReversedStr = SVGPathCommander.pathToString(pathValueReversed); 53 | newEllipsePath.setAttribute('d', pathValueReversedStr); 54 | } 55 | 56 | setRendered(true); 57 | } 58 | }, [svgRef.current, reversed, width, height, svgProps, cx, cy, rx, ry, ellipseProps]); 59 | 60 | if (isNullOrUndefined(width)) { 61 | throw new Error('ReactCurvedText Error: width is required'); 62 | } 63 | 64 | if (isNullOrUndefined(height)) { 65 | throw new Error('ReactCurvedText Error: height is required'); 66 | } 67 | 68 | if (isNullOrUndefined(cx)) { 69 | throw new Error('ReactCurvedText Error: cx is required'); 70 | } 71 | 72 | if (isNullOrUndefined(cy)) { 73 | throw new Error('ReactCurvedText Error: cy is required'); 74 | } 75 | 76 | if (isNullOrUndefined(rx)) { 77 | throw new Error('ReactCurvedText Error: rx is required'); 78 | } 79 | 80 | if (isNullOrUndefined(ry)) { 81 | throw new Error('ReactCurvedText Error: ry is required'); 82 | } 83 | 84 | if (isNullOrUndefined(text)) { 85 | throw new Error('ReactCurvedText Error: text is required'); 86 | } 87 | 88 | const textKey = JSON.stringify({ 89 | width, 90 | height, 91 | cx, 92 | cy, 93 | rx, 94 | ry, 95 | startOffset, 96 | reversed, 97 | text, 98 | svgProps, 99 | ellipseProps, 100 | textPathProps, 101 | textProps, 102 | tspanProps, 103 | rendered, 104 | }); 105 | 106 | return ( 107 | 108 | 109 | 110 | {text} 111 | 112 | 113 | 114 | ); 115 | }; 116 | 117 | export default ReactCurvedText; 118 | -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | import ReactCurvedText from './ReactCurvedText'; 2 | 3 | export { ReactCurvedText }; 4 | 5 | export default ReactCurvedText; 6 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const container = document.getElementById('root'); 7 | const root = createRoot(container); 8 | root.render(); 9 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [ 7 | react({ 8 | include: '**/*.{js,jsx,tsx}', 9 | }), 10 | ], 11 | base: '/react-curved-text/', 12 | build: { 13 | outDir: 'storybook-dist', 14 | }, 15 | }); 16 | --------------------------------------------------------------------------------