https://github.com/trevorblades/react-spiral

🌀 A React component to render text in spiral shapes
https://github.com/trevorblades/react-spiral

cosine n-gon spiral triangle trigonometry

Last synced: about 1 month ago
JSON representation

🌀 A React component to render text in spiral shapes

• Host: GitHub
• URL: https://github.com/trevorblades/react-spiral
• Owner: trevorblades
• Created: 2021-05-09T08:36:40.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-05T06:02:15.000Z (over 2 years ago)
• Last Synced: 2024-10-10T10:27:57.627Z (about 1 month ago)
• Topics: cosine, n-gon, spiral, triangle, trigonometry
• Language: TypeScript
• Homepage: https://npm.im/react-spiral
• Size: 583 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-spiral

This React component renders a spiral of text. You choose the shape and the size of the spiral, and the component takes care of the rest.

## Installation

```bash

npm i react-spiral

```

## Usage

```jsx

import Spiral from 'react-spiral';

function MyComponent() {

  return (

    

      I'm a spiral

    

  );

}

```

## Configuration

All of the following props are required to properly render a spiral:

| Name | Type | Description |

| - | - | - |

| sides | number | The number of sides that the shape has. A triangle has 3 sides, a square has 4, a pentagon has 5, and so on. |

| children | string | The text to be rendered in the spiral. The text will continue to repeat itself until there's no room left. |

| boxSize | number | The size, in pixels, of the square that the spiral will be rendered within |

| fontSize | number | The size of the font, in pixels |

| spacing | number | The amount of space, in pixels, between parallel lines in the spiral |

## Further reading

If you're interested to learn how this component works, I wrote [a blog post](https://trevorblades.com/lab/spiral-into-madness) explaining all of the techniques that were involved in its creation. I learned a ton about math and trigonometry in the process, and I hope I can share some of my learnings in a digestible way. There's also a few interactive demos in there that are pretty fun to play with. 😊