README
react-3d-square
3D Square with transition
Table of Content
Install
$ npm install --save react-3d-square
Usage
The library consists of a single component. Square components can have four children and can ignore more than four children. You can control the index, transition-duration, etc. of Square using props.
import Square from 'react-3d-square';
// ...
<Square index={'front'} transition={0.5}>
<div>FRONT</div>
<div>RIGHT</div>
<div>BACK</div>
<div>LEFT</div>
</Square>;
// ...
Main Props
Attributes | Type | Default | Description |
---|---|---|---|
index | string |
front |
Sets the current square side. Possible values: front, right, back, left |
size | number |
500 |
Width(px) of Square. Height of Square is 100% |
transition | number |
1 |
Duration of transition |
emptyBgColor | string |
#fff |
Background color of empty face of Square |
emptyBdColor | string |
#000 |
Border color of empty face of Square |
To run an example:
$ git clone https://github.com/hseoy/react-3d-square
$ npm install
$ npm start
License
MIT © hseoy