react-cubox

Build your own Cube 3D made with React

This component will you help to build a fancy Cube 3D interactive, simulated via CSS transformations with React.

See usage and demo.

Install

npm install --save react-repeat

Usage

Only you need the Cube and Face components, example:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube>
      <Face />
    <Cube>
  </div>
)

You can pass the size in px via size prop:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube size={200}>
      <Face />
    <Cube>
  </div>
)

You can pass any html or React components inside of the <Face> component. If you only pass one <Face> this will be repeated 6 times once by every face of the cube:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube>
      <Face>
        <span>⚡</span>
      </Face>
    <Cube>
  </div>
)

If you pass two or more <Face> this will repeat until to fill the six sides.

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube>
      <Face>
        <span>⚡</span>
      </Face>
      <Face>
        <span>🔥</span>
      </Face>
    <Cube>
  </div>
)

You can pass the bgColor to change the base color:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube bgColor='red'>
      <Face>
        <span>⚡</span>
      </Face>
      <Face>
        <span>🔥</span>
      </Face>
    <Cube>
  </div>
)

You can pass bgColor different for every Face:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube>
      <Face bgColor='red'>
        <span>⚡</span>
      </Face>
      <Face bgColor='blue'>
        <span>🔥</span>
      </Face>
    <Cube>
  </div>
)

The opacity is dynamic for the active or visible face, this is controlled by behavior prop, by default has translucid the opacity will be less for the active face, you can pass active and the face active will be more opaque, you can controll the opacity on every state with props activeOpacity and inactiveOpacity and define the transition duration with opacityTransitionTime:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube
      behavior='active'
      bgColor='lime'
      activeOpacity={0.9}
      inactiveOpacity={0.3}
      opacityTransitionTime={450}
    >
      <Face>
        <span>⚡</span>
      </Face>
      <Face>
        <span>🔥</span>
      </Face>
    <Cube>
  </div>
)

You can pass the color usign bgColor by default the material is gradient but you can pass solid to avoid the gradient.

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube
      bgColor='lime'
      material='solid'
    >
      <Face>
        <span>⚡</span>
      </Face>
      <Face>
        <span>🔥</span>
      </Face>
    <Cube>
  </div>
)

Also you can pass texture yo the material prop and define the prop texture to add a background image:

import { Cube, Face } from 'react-cubox'

const App = () => (
  <div>
    <Cube
      bgColor='lime'
      material='texture'
      texture='https://your-image-url/image.jpg'
    >
      <Face>
        <span>⚡</span>
      </Face>
      <Face>
        <span>🔥</span>
      </Face>
    <Cube>
  </div>
)

You can listen the click event on every face with listener onFaceClick and you receive the face index and more info via object event. All props that you pass via prop face will be received in this object:

import { Cube, Face } from 'react-cubox'

const App = () => {
  function handle (data) {
    // You receive the info here
  }

  return (
    <div>
      <Cube
        bgColor='lime'
      >
        <Face onFaceClick={handle}>
          <span>⚡</span>
        </Face>
      <Cube>
    </div>
  )
}

This component uses Standard JS

License

MIT © rocksfenix