1.0.0 • Published 3 years ago

react-cuboid v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

react-cuboid

A cuboid component for react

NPM JavaScript Style Guide

Install

npm install --save react-cuboid

or

yarn add react-cuboid

Demo

cube

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

nametypedefault
size?number100
width?numberprops.size
height?numberprops.size
depth?numberprops.size
perspective?number1000
perspectiveX?number50
perspectiveY?number50
rotateX?number0
rotateY?number0
rotateZ?number0
skewX?number0
skewY?number0
sideStyle?number{}

License

MIT © dopey2