1.0.4 • Published 3 years ago

react-3d-square v1.0.4

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

react-3d-square

3D Square with transition

Table of Content

  1. Install
  2. Usage
  3. Main Props
  4. To run an example
  5. License

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

AttributesTypeDefaultDescription
indexstringfrontSets the current square side. Possible values: front, right, back, left
sizenumber500Width(px) of Square. Height of Square is 100%
transitionnumber1Duration of transition
emptyBgColorstring#fffBackground color of empty face of Square
emptyBdColorstring#000Border 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