❤
npm
Sign UpSign In

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

1.1.5 • Public • Published

Isometric React (React version of IsometricSass)

Full rewrite of IsometricSass using TypeScript, React and styled-components.

Installation

To install using npm, run the following command:

npm i isometric-react

If you wanna install using yarn, run the following command:

yarn add isometric-react

Initial setup

To begin using this package, you will have to import two wrappers that will act as a container for all of your HTML:

Code Preview 
import { IsometricContainer, Isometric } from "isometric-react";

const Showcase = () => {
  return (
    <IsometricContainer>
      <Isometric>
        <p>Hello World!</p>
      </Isometric>
    </IsometricContainer>
  );
};
 Container preview

Begin using

Isometric React comes with couple of components that all have their specific properties. They need to be placed inside the previously mentioned containers (replacing <p>Hello World!</p> with Isometric components).

Below you will find API for each component that exists inside this package. For more advance usage (like shadows, position changing, animations, etc.) you can find that further below under Advanced API section.

Grid Component

Code Preview 
import { IsometricGrid } from "isometric-react";

const Showcase = () => {
  return (
    <IsometricContainer>
      <Isometric>
      
        <IsometricGrid
          size={10}
          sizeMultiplier={{
            width: 5,
            height: 5,
          }}
          color="red"
          lineweight={2}
        />
        
      </Isometric>
    </IsometricContainer>
  );
};
 Grid preview

Grid API

Property name Description Type Required
size Defines how large will grid appear to be number True
sizeMultiplier Defines number of rows and columns { width: number; height: number } True
color Defines the color of the grid. Accepts RGB, Hex or just a regular color name string True
lineweight Defines the thickness of the grid lines number True
children Takes any HTML or JSX/TSX elements and renders them JSX.Element | JSX.Element[] False

Plane Component

Code Preview 
import { IsometricPlane } from "isometric-react";

const Showcase = () => {
  return (
    <IsometricContainer>
      <Isometric>

        <IsometricPlane color="#ffffff" width={5} height={5} />
        
      </Isometric>
    </IsometricContainer>
  );
};
 Plane preview

Plane API

Property name Description Type Required
width Defines the width of a plane number True
height Defines the height of a plane number True
color Defines the color of the grid. Accepts RGB, Hex or just a regular color name string True
border Defines the border of the plane { size: string ([number][unit]); style: 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'none' | 'hidden'; color: string (HEX colors only) } False
edge Defines the "shadow" plane of the current plane (works best with lower depth values) { depth: string ([number][unit]); color: string (HEX colors only) } False
children Takes any HTML or JSX/TSX elements and renders them JSX.Element | JSX.Element[] False

Cube component

Code Preview 
import { IsometricCube } from "isometric-react";

const Showcase = () => {
  return (
    <IsometricContainer>
      <Isometric>

        <IsometricCube
          width={5}
          height={5}
          depth={5}
          color="rgb(255, 255, 255)"
          border={{
            size: "2px",
            style: "solid",
            color: "#000000",
          }}
        >
          {[...Array(6)].map((_, sideIndex) => (
            <div key={sideIndex}>Side: {sideIndex}</div>
          ))}
        </IsometricCube>

      </Isometric>
    </IsometricContainer>
  );
};
 Cube preview

IMPORTANT PART ABOUT CUBE COMPONENT

Cube component is the only component that REQUIRES children. It works the following way:

  • Each child of IsometricCube component represents one cube side. (6 in total).
  • Sides follow this pattern: top, front left, front right, bottom, back right, back left.
  • One child is enough for component to work, but keep in mind the pattern from above where that child will appear if you plan on using less than 6 children (6 cube sides).

One solution would be to make all 6 sides available using empty div elements and then use/hide the sides you have in mind to use/not use.

To try out how the cube component works, you can do so here.

Cube API

Property name Description Type Required
width Defines the width of a cube number True
height Defines the height of a cube number True
depth Defines how tall the cube will be number True
color Defines the color of the grid. Accepts RGB, Hex or just a regular color name string True
children Takes any HTML or JSX/TSX elements and renders them on one of the cubes sides following the next pattern: top, front left, front right, bottom, back right, back left. JSX.Element | JSX.Element[] True
border Defines the border of the plane { size: string ([number][unit]); style: 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'none' | 'hidden'; color: string (HEX colors only) } False

Advanced API

Shadow

Every component comes with this optional property. It creates a shadow below the item. You can try it online here.

Usage

Code Preview 
const Showcase = () => {
  return (
    <IsometricContainer>
      <Isometric>
        <IsometricPlane
          color="#ffffff"
          width={5}
          height={5}
          shadow={{
            distance: 0.7,
            spacingX: 1,
            spacingY: 1,
          }}
        />
      </Isometric>
    </IsometricContainer>
  );
};
 Shadow preview
Property name Description Type Required
shadow Defines the shadow of cube/plane/grid { distance: number; spacingX: number; spacingY: number } False

Position

Every component comes with this optional property. It offsets (moves) the item for given values. You can try it online here.

Usage

Code Preview 
const Showcase = () => {
  return (
    <IsometricContainer>
      <Isometric>
        <IsometricGrid
          size={5}
          ...
        />
        <IsometricCube
          ...
          color="rgb(255, 255, 255)"
        >
          {[...Array(6)].map((_, sideIndex) => (
            <div key={sideIndex}>
              ...
            </div>
          ))}
        </IsometricCube>
        <IsometricCube
          ...
          color="rgb(0, 255, 0)"
          position={{
            top: 10,
            left: 15,
            elevation: 0,
          }}
        >
          {[...Array(6)].map((_, sideIndex) => (
            <div key={sideIndex}>
              ...
            </div>
          ))}
        </IsometricCube>
      </Isometric>
    </IsometricContainer>
  );
};
 Position preview
Property name Description Type Required
position Defines the position of cube/plane/grid { top: number; left: number; elevation: number } False

Animation

Every component comes with this optional property. It animates the component based on the given values.

Usage

You can try and see how animation works here.

animation is a property that accepts an OBJECT with following properties:

Property name Description Type Required
name Name of the animation string True
attribute Transform string True
from Where to start animation from string True
to Where to finish animation string True
delay Delay of the animation string True
duration Duration of the animation string True
options Additional animation options like infinite, alternate, etc. string True

Shadow Animation

Every component comes with this optional property. It animates the components shadow based on the given values.

Usage

You can try and see how shadow animation works here.

shadowAnimation is a property that accepts an OBJECT with following properties:

Property name Description Type Required
name Name of the shadow animation string True
from Where to start shadow animation from number True
to Where to finish shadow animation number True
spacingX Offset shadow on X axis number True
spacingY Offset shadow on Y axis number True
delay Delay of the shadow animation string True
duration Duration of the shadow animation string True
options Additional shadow animation options like infinite, alternate, etc. string True

Rotation

Every component comes with this optional property. It rotates the component based on the given values.

Usage

You can try and see how rotation works here.

rotate is a property that accepts an OBJECT with following properties:

Property name Description Type Required
name Name of the rotation string True
from Where to start rotation from string ([number]deg) True
to Where to finish rotation string ([number]deg) True
delay Delay of the rotation string True
duration Duration of the rotation string True

Readme

Keywords

Package Sidebar

Install

npm i isometric-react

Repository

github.com/JaViLuMa/isometric-react

Homepage

github.com/JaViLuMa/isometric-react#readme

Weekly Downloads

6

Version

1.1.5

License

none

Unpacked Size

78.2 kB

Total Files

139

Last publish

Collaborators

  • javiluma
Try on RunKit
Report malware