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

npm i react-spiral

Usage

import Spiral from 'react-spiral';

function MyComponent() {
  return (
    <Spiral
      sides={3}
      text="i'm a spiral"
      boxSize={500}
      fontSize={30}
      spacing={20}
    />
  );
}

Configuration

All of the following props are required

| Name | Description | More info | | - | - | | sides | The number of sides that the shape has | A triangle has 3 sides, a square has 4, a pentagon has 5, and so on | | text | The text to be rendered in the spiral | The text will continue to repeat itself until there's no room left | | boxSize | The size, in pixels, of the square that the spiral will be rendered within | | | fontSize | The size of the font, in pixels | | | spacing | The amount of space between parallel lines in the spiral | |

Further reading

If you're interested to learn how this component works, I wrote a blog post 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. 😊