Non Programming Manager

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

    1.0.13 • 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.13

    Version

    1.0.13

    License

    ISC

    Unpacked Size

    18.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • trevorblades