Skip to main content

Types

This page lists the core TypeScript types used across isometric-react.

Geometry and layout​

SizeAsObject​

type SizeAsObject = {
  width: string | number;
  height: string | number;
};

Used by IsometricCube and IsometricPlane.

Position​

type Position = {
  top?: number | string;
  left?: number | string;
  elevation?: number | string;
};

Used by IsometricCube, IsometricPlane, and IsometricGrid.

SizeMultiplier​

type SizeMultiplier = {
  width?: number;
  height?: number;
};

Used by IsometricGrid.

Surface and depth styling​

Border​

type Border = {
  size?: React.CSSProperties["borderWidth"];
  style?: React.CSSProperties["borderStyle"];
  color?: React.CSSProperties["borderColor"];
};

Used by IsometricCube and IsometricPlane.

Edge​

type Edge = {
  depth?: string | number;
  color?: string;
};

Used by IsometricPlane.

Shadows and animation​

Shadow​

type Shadow = {
  distance: number | string;
  spacingX: number;
  spacingY: number;
};

Used by IsometricCube, IsometricPlane, and IsometricGrid.

ShadowAnimation​

type ShadowAnimation = {
  from: number | string;
  to: number | string;
  spacingX: number;
  spacingY: number;
  delay?: number;
  duration?: number;
  options?: string;
};

Used by IsometricCube, IsometricPlane, and IsometricGrid.

Rotation​

type Rotation = {
  from: number | string;
  to: number | string;
  delay?: number;
  duration?: number;
};

Used by IsometricCube, IsometricPlane, and IsometricGrid.

Polymorphism and cube faces​

PolymorphicProps​

import type { ComponentPropsWithRef, ElementType } from "react";

type AsProp<C extends ElementType> = {
  as?: C;
};

type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);

type PolymorphicProps<C extends ElementType, P = {}> = P &
  AsProp<C> &
  Omit<ComponentPropsWithRef<C>, PropsToOmit<C, P>>;

Used by all public components to support the as prop.

CubeSides​

type CubeSides =
  | "top"
  | "front-left"
  | "front-right"
  | "bottom"
  | "back-left"
  | "back-right";

Used by IsometricCube.Side.