Never Pummel Muskoxen

    react-cubox
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    react-cubox

    Build your own Cube 3D made with React

    NPM JavaScript Style Guide

    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

    JavaScript Style Guide

    License

    MIT © rocksfenix

    Keywords

    none

    Install

    npm i react-cubox

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    96 kB

    Total Files

    40

    Last publish

    Collaborators

    • gerardogallegos