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}
      boxSize={500}
      fontSize={30}
      spacing={20}
    >
      I'm a spiral
    </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 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. 😊