1.0.0 • Published 4 years ago
react-cuboid v1.0.0
react-cuboid
A cuboid component for react
Install
npm install --save react-cuboidor
yarn add react-cuboidDemo

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
1.0.0
4 years ago