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