Here is a GIF of the cube in the demo so that you can see what it looks like at a glance (the actual demo is live, customizable and allow you to export the code necessary to instantiate the cube with the used custom values: open the demo page):
If you want to showcase some images in an original way, give it a try.
Either continue to read to learn more about this cube component to see if it fits your needs or jump right to Installation & Usage.
You can add up to 6 faces to the cube.
The cube is very customizable.
You can customize:
You can add custom CSS classes and React props to:
The cube has the aria-live="polite"
property so that the cube announces face changes to screen readers. All the faces other than the current face have aria-hidden="true"
. You can add other props easily as mentioned above.
This package exports multiple variables with values & TypeScript types you may want to use when using this cube: an array with the names of the default breakpoints, an array with the names of the faces, a type that only accepts the names of the faces, etc. Look at the API documentation for more details about what is available (everything is listed in the navigation section).
This component has been thoroughly tested with Playwright. There are at the time of writing 45 tests that make sure it works properly. You can take a look at the tests suite in the GitHub repository.
Look at the API documentation for more details about the API.
npm install cube-react-component // Expect you to have React "18.2.0" or later, didn't test with older versions but should work too.
If your bundler support it, you can import the CSS in the code file where you want to instantiate the cube:
import "cube-react-component/style.css";
Or you can just import the CSS in an active CSS file:
@import "path/to/node_modules/cube-react-component/dist/style.css"; /* Check if your project has a better way to import the CSS than hardcoding the path */
Then you just have to import the Cube and instantiate it with your values:
import { Cube } from "cube-react-component";
...
<Cube
sizes={{
base: "50vw",
sm: "40vw",
md: "35vw",
lg: "30vw",
xl: "25vw",
"2xl": "20vw",
}}
perspective="none"
transitionDuration="1s"
transitionTimingFunction="cubic-bezier(0.4, 0, 0.2, 1)"
currentFace={currentFace}
faces={faces}
/>
Look at the code of the demo to see a real example. The actual demo itself also acts as a builder! You can customize parameters and it produces the code for the cube that you can copy at the push of a button. Don't hesitate to try it.
If you want to set up your own breakpoints, you need to set the CSS variable --cube-css-size
on the container or above:
/* Give the class with the CSS variable to the container of the cube or to a wrapping component.
Use whatever breakpoints you want and however many variations you want */
.css-cube-sizing {
--cube-css-size: 100vw;
}
@media (min-width: 1000px) {
.css-cube-sizing {
--cube-css-size: 50vw;
}
}
@media (min-width: 2000px) {
.css-cube-sizing {
--cube-css-size: 20vw;
}
}
Then you can set the prop useCSSVariableForCubeSize
to true on the cube so that TypeScript won't complain because you didn't provide a sizes
object to the Cube:
<Cube
perspective="none"
transitionDuration="1s"
transitionTimingFunction="cubic-bezier(0.4, 0, 0.2, 1)"
currentFace={currentFace}
faces={faces}
// set the CSS variable on the container (or any wrapping component above if you want)
containerAdditionalClasses="css-cube-sizing"
// then set either:
useCSSVariableForCubeSize={true}
// or you can also just mention it since it will default to true:
useCSSVariableForCubeSize
/>
The CSS size has priority even if you don't set the variable useCSSVariableForCubeSize
, do no set it if you want to use the sizes
object to size the cube.
Look at the API documentation for more details about the API.
This cube CSS logic is inspired from the one presented in this Intro to CSS 3D transforms: https://3dtransforms.desandro.com/
MIT
Generated using TypeDoc