Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-cubify

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cubify

A React component designed to transform a target element into animated 3d cubes.

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8
Maintainers
1
Weekly downloads
 
Created
Source

React Cubify

Cubify is a React component designed to represent a designated area as a matrix of rotatable cubes. The component accepts four children that are assigned to the front, left, back, and right face of each cube in the matrix. The motion profile consists of row and column size, easing, duration, and displacement among others. The Cubify component simply wraps four children and manages their render states internally. The motion action is accomplished by invoking the cubifyApply() method.

Features

  • Callbacks for onStart, onReady, onComplete
  • Fully configurable rotate behavior
  • No adjustments to existing HTML/CSS needed
  • Ability to assign a unique child to each cube face (4 faces)

Learn more

See the demo at http://www.uismithing.com/main/cubify.

Repository

https://github.com/uismithing/react-cubify

Install

npm install react-cubify -s

Deploy

import Cubify from "react-cubify"

<Cubify ref="cubifywallpaper" {...cubifyProfile}>
	<div id="cubify-frontpanel-container" className="cubify-frontpanel"></div>
	<div id="cubify-leftpanel-container" className="cubify-leftpanel"></div>
	<div id="cubify-backpanel-container" className="cubify-backpanel"></div>
	<div id="cubify-rightpanel-container" className="cubify-rightpanel"></div>
</Cubify>

Keywords

FAQs

Package last updated on 21 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc