react-cuboid

A cuboid component for react

Install

npm install --save react-cuboid

or

yarn add react-cuboid

Demo

Usage

Cuboid example

import React from 'react'
import Cuboid, { Front, Back, Top, Bottom, Left, Right } from 'react-cuboid'

const App = () => {
  return (
    <div style={{ marginLeft: 200, marginTop: 200 }}>
      <Cuboid
        width={150}
        height={200}
        depth={250}
        sideStyle={{borderStyle: 'solid'}}
        rotateX={10}
        rotateY={20}
        >
          <Front> {/** front side */} </Front>
          <Back> {/** back side */} </Back>
          <Top> {/** top side */} </Top>
          <Bottom> {/** bottom side */} </Bottom>
          <Left> {/** left side */} </Left>
          <Right> {/** right side */} </Right>
        </Cuboid>
      </div>
  );
}

Cube example

import React from 'react'
import Cuboid, { Front, Back, Top, Bottom, Left, Right } from 'react-cuboid'

const App = () => {
  return (
    <div style={{ marginLeft: 200, marginTop: 200 }}>
      <Cuboid
        size={100}
        sideStyle={{borderStyle: 'solid'}}
        rotateX={10}
        rotateY={20}
        >
          <Front> {/** front side */} </Front>
          <Back> {/** back side */} </Back>
          <Top> {/** top side */} </Top>
          <Bottom> {/** bottom side */} </Bottom>
          <Left> {/** left side */} </Left>
          <Right> {/** right side */} </Right>
        </Cuboid>
      </div>
  );
}

Props

name	type	default
size	?number	100
width	?number	props.size
height	?number	props.size
depth	?number	props.size
perspective	?number	1000
perspectiveX	?number	50
perspectiveY	?number	50
rotateX	?number	0
rotateY	?number	0
rotateZ	?number	0
skewX	?number	0
skewY	?number	0
sideStyle	?number	{}

License

MIT © dopey2