Skip to main content

Getting Started

landing page screenshot

What is react-use-polygon?​

react-use-polygon is a collection of react hooks and utilities functions that help you to create geometry shapes, primitives and polygon. This package aims to provide a great developer experience and super simple API.

Moreover, we only generate the minimum required geometry primitive for you to work on anything you want. We want to give you the maximum flexibility on how to display/render your own polygon.

As simple as this:

src/components/SimpleDemo.tsx
import { BasicSVGRenderer, useTriangle } from "react-use-polygon";

import styles from "./styles.module.css";

export default function SimpleDemo() {
  const triangle = useTriangle();

  return (
    <BasicSVGRenderer
      className={styles.simpleDemo}
      primitives={triangle}
      viewBoxOptions={{ padding: { x: 150, y: 40 } }} // Not required, depends on how you render
    />
  );
}

Outcome:

Installtion​

npm install react-use-polygon

react-use-polygon is a standalone package and does not have any dependencies. 🎉

We want to keep our package as light weight as possible too.

What you'll need​

a.k.a. peer dependencies

  • react >= 18
  • react-dom >= 18

For react and react-dom, it should be fine with hooks version and above, i.e. v16.8. But this package is developed and tested with newer version.

note

We had added "useClient"; tag on top of every client side components. So, you can safely use it in RSC or NextJS.