react-circular-text-writer
Version:
A JavaScript utility to arrange text in a circular shape using HTML and CSS. Supports monospaced fonts for better alignment.
216 lines (145 loc) • 6.44 kB
Markdown
# react-circular-text-writer [](https://www.npmjs.com/package/react-circular-text-writer) [](<[LICENSE](https://github.com/angelabenavente/react-circular-text-writer/LICENSE)>) [](https://www.npmjs.com/package/react-circular-text-writer)
<!-- [](https://www.npmjs.com/package/react-circular-text-writer)-->
> React utility that displays a given text in a circular pattern. This function takes a string of text and places it along the circumference of a circle with a specified radius. Each letter of the text is positioned around the circle, with a calculated rotation angle to ensure the text fits perfectly.
<!-- `react-circular-text-writer` is a tiny library that works in all Javascript environments. -->
## 🚀 Features
- **Easy text arrangement**: Distributes the letters of a text string in a circular layout within an HTML container.
- **Customizable text appearance**: Allows customization of text color, font, and font weight.
Precise positioning: Uses a relative-positioned container and absolutely-positioned elements to adjust text placement precisely.
- **Precise positioning**: Uses a relative-positioned container and absolutely-positioned elements to adjust text placement precisely.
- **Support for custom fonts**: Allows you to specify a custom font if needed, in addition to standard monospaced fonts.
- **ESM and CJS support**: Fully compatible with modern module systems.
## 🚀 Parameters
- **text (string)**: The text to be displayed in a circular pattern.
- **radius (number)**: The radius of the circle where the letters will be placed (optional).
- **id (optional string)**: The ID of the HTML container element where the circular text will be inserted.
- **options (optional object)**:
- **color (string, default #000000)**: The text color.
- **fontFamily (string, default "Menlo, monospace")**: he font to be used. It can be one of the following monospaced fonts:'Menlo', 'Courier New', 'Consolas', 'Lucida Console', 'Monaco', 'monospace', or "customFont" if a custom font is desired.
- **fontWeight (number, default 400)**: The weight of the font.
- **color (string, default #000000)**: The text color.
## 📦 Installation
You can install `react-circular-text-writer` using your favorite package manager:
```
# Using pnpm
pnpm add react-circular-text-writer
# Using npm
npm install react-circular-text-writer
# Using yarn
yarn add react-circular-text-writer
```
## 🌟 Usage
Here's how to use the library in your project:
### Import the library
```
// CommonJS
const CircularTextWriter = require('react-circular-text-writer');
// ES Modules
import CircularTextWriter from 'react-circular-text-writer';
```
### Basic example
```
import CircularTextWriter from 'react-circular-text-writer';
<CircularTextWriter
text="This is a circular text "
radius={150}
id="react-circular-text-writer"
options={{
color: "#ff0000", // red
fontFamily: "Menlo",
fontWeight: 700, // bold
}}
/>
```
## Result
<img width="397" alt="react-circular-text-writer" src="https://github.com/user-attachments/assets/21ea584f-371d-4396-af5c-7d911e8e7143" />
### Long text example
```
import CircularTextWriter from 'react-circular-text-writer';
<CircularTextWriter
text="This text is too long to test that it is possible to display it in a circular way as well. "
radius={150}
id="react-circular-text-writer"
options={{
color: "#ff0000", // red
fontFamily: "Menlo",
fontWeight: 700, // bold
}}
/>
```
## Result
<img width="397" alt="react-circular-text-writer-long-text" src="https://github.com/user-attachments/assets/65434dcd-fa53-46db-8b98-2be06f15e861" />
### Small radius example
```
import CircularTextWriter from 'react-circular-text-writer';
<CircularTextWriter
text="Small radius circle text "
radius={150}
id="react-circular-text-writer"
options={{
color: "#ff0000", // red
fontFamily: "Menlo",
fontWeight: 700, // bold
}}
/>
```
## Result
<img width="157" alt="react-circle-text-writer-small-radius" src="https://github.com/user-attachments/assets/0b838f17-593c-4c4d-9f63-1f490d9960ad" />
### Small font-size example
```
import CircularTextWriter from 'react-circular-text-writer';
<CircularTextWriter
text="Circle text with 8px of font size "
radius={150}
id="react-circular-text-writer"
options={{
color: "#ff0000", // red
fontFamily: "Menlo",
fontWeight: 700, // bold
fontSize: 8,
}}
/>
```
## Result
<img width="157" alt="react-circle-text-writer-small-font-size" src="https://github.com/user-attachments/assets/c3bcb0d9-182d-4bdb-9b82-d61d19adf3d5" />
## 🛠️ Development
If you want to contribute or run the project locally, follow these steps:
### Clone the repository
```
git clone https://github.com/angelabenavente/react-circular-text-writer.git
cd react-circular-text-writer
```
### Install dependencies
```
npm install
```
### Run tests
```
npm run test
```
### Lint the code
```
npm run eslint
```
## 🔄 Changelog
See [CHANGELOG.md](https://github.com/angelabenavente/react-circular-text-writer/blob/main/CHANGELOG.md) for a detailed history of changes.
## 💡 Contributing
Contributions are welcome! If you'd like to contribute, please follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Submit a pull request with a clear description of the changes.
See [CONTRIBUTING.md](https://github.com/angelabenavente/react-circular-text-writer/blob/main/CONTRIBUTING.md) for more details.
## 📜 License
This project is licensed under the [MIT License](https://github.com/angelabenavente/react-circular-text-writer/blob/main/LICENSE). Created with ❤️ by [Ángela Benavente](https://github.com/angelabenavente).
## 🌍 Links
- **GitHub Repository:** [https://github.com/angelabenavente/react-circular-text-writer](https://github.com/angelabenavente/react-circular-text-writer)
- **NPM Package:** [https://www.npmjs.com/package/react-circular-text-writer](https://www.npmjs.com/package/react-circular-text-writer)