Nerdy Pun Mavens

    react-spiral
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.14 • Public • Published

    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. 😊

    Install

    npm i react-spiral@1.0.14

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • trevorblades