react-triangular-text

React utility that displays a given text in a equilateral equilateral triangle shape. The triangle will have a width size given in px. Each letter of the text is positioned and rotated around the triangle, with a calculated rotation angle to ensure the text fits perfectly.

🚀 Features

• Easy text arrangement: Distributes the letters of a text string in a equilateral triangular 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 equilateral triangular shape.
• size (number): The size of the triangle width in px where the letters will be placed (optional).
• id (optional string): The ID of the HTML container element where the triangular 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.
  • fontSize (number, default 16): The size of the font.

📦 Installation

You can install react-triangular-text using your favorite package manager:

# Using pnpm
pnpm add react-triangular-text

# Using npm
npm install react-triangular-text

# Using yarn
yarn add react-triangular-text

🌟 Usage

Here's how to use the library in your project:

Import the library

// CommonJS
const TriangularText = require('react-triangular-text');

// ES Modules
import TriangularText from 'react-triangular-text';

Basic example

import TriangularText from 'react-triangular-text';

<TriangularText
  text="This words are being displayed as a triangle."
  id="container2"
  options={{
    color: "black",
    fontFamily: "Menlo",
    fontWeight: 700,
    fontSize: 16,
  }}
  size={420}
/>

Result

Smaller triangle size example with font size and color changes

import TriangularText from 'react-triangular-text';

<TriangularText
  text="Theseareverylongwordsplacedinatriangularshape"
  id="container2"
  options={{
    color: "blue",
    fontFamily: "Menlo",
    fontWeight: 700,
    fontSize: 12,
  }}
  size={250}
/>

Result

Presentation proposal with another color and font weight

import TriangularText from 'react-triangular-text';

<TriangularText
    text="These·long·text·is·placed·in·a·triangle·shape·"
    id="container2"
    options={{
      color: "red",
      fontFamily: "Menlo",
      fontWeight: 400,
      fontSize: 14,
    }}
    size={400}
  />

Result

🛠️ Development

If you want to contribute or run the project locally, follow these steps:

Clone the repository

git clone https://github.com/angelabenavente/react-triangular-text.git
cd react-triangular-text

Install dependencies

npm install

Run tests

npm run test

Lint the code

npm run eslint

🔄 Changelog

See 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 for more details.

📜 License

This project is licensed under the MIT License. Created with ❤️ by Ángela Benavente.

🌍 Links

• GitHub Repository: https://github.com/angelabenavente/react-triangular-text

• NPM Package: https://www.npmjs.com/package/react-triangular-text