Face you want the cube to show. Change this parameter to make the cube move and make it show the new face selected (the cube will move with an animation when changing face).
Must be one of:
"front" | "right" | "back" | "left" | "top" | "bottom"
An array with these values is exported from this module for your convenience, can be imported this way:
import { facesNames } from 'cube-react-component'; // facesNames is ['front', 'right', 'back', 'left', 'top', 'bottom'] (readonly)
You can also import the CubeFace type:
import { type CubeFace } from 'cube-react-component'; // type CubeFace = "front" | "right" | "back" | "left" | "top" | "bottom"`
Can be used to type your code in TypeScript. For example with useState() from React:
const [currentFace, setCurrentFace] = useState<CubeFace>('front'); // This state will only accept any of the correct face names for this parameter.
Optional transitionDuration of the transition between the faces.
Default to one second.
(Use the unit s for seconds and ms for milliseconds.)
Examples:
0s 1.5s 6s 0ms 150.25ms 6000ms
Refer to the <time> MDN page for more details about the accepted values.
Optional transitionCSS Transition timing function used for the transition between the faces.
Default to cubic-bezier(0.4, 0, 0.2, 1).
Examples:
linear ease-in-out cubic-bezier(0.4, 0, 0.2, 1)
Refer to the transition-timing-function MDN page for more details about the accepted values.
Optional perspective?: stringPerspective if you want to add one.
Default to none.
Example Values: none 800px 23rem 5.5cm
Refer to the MDN page and this explanation for more details about the notion of perspective.
Optional containerString of CSS classes you can have added to the container classes. The container is the outermost wrapping element of the cube component.
const containerAdditionalClasses = "additional1 additional2";
<div // div of the container
className={'container-internal-class-1 container-internal-class-2' + ' ' containerAdditionalClasses}
>child components...</div>
Optional sceneString of CSS classes you can have added to the scene classes. The scene is used as the base for the cube animations, it is wrapping the (inner not the whole component) cube.
const sceneAdditionalClasses = "additional1 additional2";
<div // div of the scene
className={'scene-internal-class-1 scene-internal-class-2' + ' ' sceneAdditionalClasses}
>child components...</div>
Optional cubeString of CSS classes you can have added to the cube classes. The cube here is the inner "real" cube, not the whole cube-react-component.
const cubeAdditionalClasses = "additional1 additional2";
<div // div of the cube
className={'cube-internal-class-1 cube-internal-class-2' + ' ' cubeAdditionalClasses}
>child components...</div>
Optional facesString of CSS classes you can use to add classes to all the faces of the cube. If you want to add the classes to only a few (or to a single one) face(s), use individualFacesAdditionalClasses.
const facesAdditionalClasses = "additional1 additional2";
<div // div of the face
className={'face-internal-class-1 face-internal-class-2' + ' ' faceAdditionalClasses}
>child components...</div>
Optional individualObject of CubeFace to CSS classes you can use to add classes to specific faces.
(if you want to add the classes to all faces, use facesAdditionalClasses for convenience)
const individualFacesAdditionalClasses = {"left":"additional1 additional2"};
<div // div of the left face
className={'face-internal-class-1 face-internal-class-2' + ' ' individualFacesAdditionalClasses}
>child components...</div>
Optional containerObject with props to add to the container. The container is the outermost wrapping element of this component.
const containerAdditionalProps = {"data-additional":true}
<div // div of container
{...containerAdditionalProps} {...otherProps}
>child components...</div>
Optional sceneObject with props to add to the scene. The scene is used as the base for the cube animations, it is wrapping the (inner not the whole component) cube.
const sceneAdditionalProps = {"data-additional":true}
<div // div of scene
{...sceneAdditionalProps} {...otherProps}
>child components...</div>
Optional cubeObject with props to add to the cube. The cube here is the inner "real" cube, not the whole cube-react-component.
const cubeAdditionalProps = {"data-additional":true}
<div // div of cube
{...cubeAdditionalProps} {...otherProps}
>child components...</div>
Optional facesObject with props to add to the face. (if you want to add props to specific faces, use individualFacesAdditionalProps)
const faceAdditionalProps = {"data-additional":true}
<div // div of face
{...faceAdditionalProps} {...otherProps}
>child components...</div>
Optional individualObject with mapping CubeFace to props. (if you want to add props to all faces, use facesAdditionalProps for convenience)
const individualFacesAdditionalProps = {left:{"data-additional":true}}
<div // div of left face
{...faceAdditionalProps} {...otherProps}
>child components...</div>
Generated using TypeDoc
The 6 faces (or less if you don't want to use them all) you want the cube to have. Provide an object with the following form:
Obviously if you provide that kind of faces, it will not look great. Try to have faces that take the full width and height to have a nice cube in the end. The main use case in mind was a cube carousel for showing images. You don't have to use the 6 faces, you can (if you want) only use 4 faces and not use the top and bottom, use even less than 4 faces and not offer the full range of motion, etc. You decide. Refer to the demo code in the GitHub repository for an example of a six-faced cube.