Skip to content

Latest commit

 

History

History
94 lines (73 loc) · 7.27 KB

README.md

File metadata and controls

94 lines (73 loc) · 7.27 KB
Raw

React 3D Cube Transition Component 💻📱

A easy to use React component to create a Fullpage 3-Dimensional rotating cube website.

NPM JavaScript Style Guide

Features

  • ✅ Highly customisable through React props
  • ✅ GPU accelerated animations
  • ✅ Zero dependencies
  • ✅ Examples included
  • 🔨 Lazy-loading cube sides (WIP)
  • 🔨 Animation events Callbacks (WIP)

Install

npm install --save react-3d-cube-transition

or

yarn add react-3d-cube-transition

Usage

import React, { Component } from 'react'

import CubeTransition from 'react-3d-cube-transition'
import 'react-3d-cube-transition/dist/index.css'

class Example extends Component {
  render() {
    return <CubeTransition 
              topPage= { <FirstPage/> }
              rightPage={ <SecondPage/> }
              contentElevation={ 15 }
            />
  }
}

Checkout working example - Standalone Example folder

Live Demo: Demo

Demo

react-3d-cube-transition demo

Main Props

Attributes Type Default Description
className string null Add a className to the component container
face string front Sets the current cube side. Possible values: front, top, left, right, top, bottom
contentElevation number 0 Set the elevation of content for each side with respect to its background
animationDuration number 1000 Animation Duration in ms (Note: Actual duration of the animation would be animationDuration*1.5 ms )
frontPage node null Renders content on the front side of the cube
backPage node null Renders content on the back side of the cube
leftPage node null Renders content on the left side of the cube
rightPage node null Renders content on the right side of the cube
topPage node null Renders content on the top side of the cube
bottomPage node null Renders content on the bottom side of the cube
frontCSS object {background: #000;} Additional styles to be applied to the front side of the cube
backCSS object {background: #000;} Additional styles to be applied to the back side of the cube
leftCSS object {background: #000;} Additional styles to be applied to the left side of the cube
rightCSS object {background: #000;} Additional styles to be applied to the right side of the cube
topCSS object {background: #000;} Additional styles to be applied to the top side of the cube
bottomCSS object {background: #000;} Additional styles to be applied to the bottom side of the cube

Author

Akshay Naik

License

MIT © akshay9