Package Exports

radial-grid
radial-grid/dist/index.js
radial-grid/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (radial-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Radial Grid

A library to organize elements into circles instead of boring normal grids.

Installation

npm install radial-grid

Usage

Basic

This will produce 6 evenly-spaced tick marks, all tilted toward the center.

import { RadialGrid, RadialRow } from "radial-grid";

<RadialGrid className="w-52">
  <RadialRow className="bg-red-800 rounded-full">
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
  </RadialRow>
</RadialGrid>;

Preserve Child Rotation

Should you want the children you pass to remain in the orientation you provide, you may use the preserveChildRotation prop. For example, to make a clock-like layout:

<RadialGrid className="w-52">
  <RadialRow className=" bg-red-800 rounded-full" preserveChildRotation>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
  </RadialRow>
</RadialGrid>

Start and End angles

If you want a more elaborate layout than a simple circle, consider using the startAngle and endAngle props. These take any number (in degrees) to modify the start and end position of the elements.

Note: The way angles are calculated, using custom start and end angles often produces an undesired effect of the last element not reaching the given end angle. To fix this, use the lastMeetEnd prop to have the first child element sitting on the given start angle, the last child element sitting on the given end angle, and the rest of the elements evenly spaced throughout.

<RadialGrid className="w-52">
  <RadialRow
    className=" bg-red-800 rounded-full"
    startAngle={90}
    endAngle={270}
    lastMeetEnd>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
  </RadialRow>
</RadialGrid>

Multiple Rows

One grid can have unlimited rows. Simply add more, and be sure to specify the diameter prop on each with a valid CSS width value. This diameter represents the outer diameter of the row.

<RadialGrid className="w-52">
  <RadialRow
    diameter={"15rem"}
    className=" bg-red-800 rounded-full"
    startAngle={90}
    endAngle={270}
    lastMeetEnd>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
  </RadialRow>
  <RadialRow
    diameter={"10rem"}
    className=" bg-blue-800 rounded-full my-6"
    startAngle={270}
    endAngle={450}
    lastMeetEnd>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
  </RadialRow>
  <RadialRow diameter={"5rem"} className=" bg-green-800 rounded-full">
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
    <p>|</p>
  </RadialRow>
</RadialGrid>