Type alias CubeSizes

Type declaration

• sizes: Partial<Record<CubeSizeBreakpoint, string>> | "default"

  breakpoint-to-size object that is used to set the size of the cube directly in the parameters of the component.

  Or give the string "default" to use the default sizes object:

  const defaultSizes = {
    base: "50vw";
    sm: "40vw";
    md: "35vw";
    lg: "30vw";
    xl: "25vw";
    "2xl": "20vw";
    }
  Copy

  There are 3 ways to set the size of the cube:

  1. Sizing with the sizes object

  2. Sizing with sizes set to "default"

  3. Sizing with custom breakpoints and a CSS variable

  1. Sizing with the sizes object and default Tailwind breakpoints (using this parameter)

  The breakpoints used are the default ones from Tailwind + there is a base breakpoint to target everything below the sm breakpoint. The default value for the base breakpoint is 50vw and will be used for the default of the ones higher until you provide your own one. At that point it's your own that will be used as the default for the higher breakpoints if you don't provide them.

  Using this parameter (sizes) to set the size of the cube is a quick & easy solution if you use the default Tailwind breakpoints in your project.

  breakpoints:

  • base: from 0px to 639px
  • sm: from 640px to 767px
  • md: from 768px to 1023px
  • lg: from 1024px to 1279px
  • xl: 1280px to 1535px
  • 2xl: 1536px and beyond

  Examples:

  1. Example with complete sizes object

  const sizes = {
   'base':'75vw', // the cube will have a width of 75vw when screen width from 0px to 639px
   'sm':'65vw', // the cube will have a width of 65vw when screen width from 640px to 767px
   'md':'35vw', // the cube will have a width of 35vw when screen width from 768px to 1023px
   'lg':'30vw', // the cube will have a width of 30vw when screen width from 1024px to 1279px
   'xl':'25vw', // the cube will have a width of 25vw when screen width from 1280px to 1535px
   '2xl':'20vw' // the cube will have a width of 20vw when screen width from 1536px  and beyond
  }
  Copy

  2. Example with sizes object missing values

  const sizes = {
   // 'base' breakpoint not provided, will take the default value of 50vw from 0px to 639px, equivalent of 'base':'50vw';
   // 'sm' breakpoint not provided, will take the value from the nearest lower breakpoint, here '50vw'
   'md':'35vw', // 'md' is provided, the cube will have a width of 35vw when screen width from 768px to 1023px
   // 'lg' breakpoint not provided, will take the value from the nearest lower breakpoint, here '35vw' from 1024px to 1279px
   'xl':'25vw', // 'xl' is provided, the cube will have a width of 25vw when screen width from 1280px to 1535px
   '2xl':'20vw' // '2xl' is provided, the cube will have a width of 20vw when screen width from 1536px  to no upper limit
  }
  Copy

  2. Sizing when sizes is set to "default"

  if sizes is not provided (and the string "default" is given instead) and the self-controlled cube size CSS variable is not set, the cube will use its own set of default values.

  Default Value

  Default values:

  const defaultSizes = {
    base: "50vw", // the cube will have a width of 50vw when screen width from 0px to 639px
    sm: "40vw",  // the cube will have a width of 40vw when screen width from 640px to 767px
    md: "35vw", // the cube will have a width of 35vw when screen width from 768px to 1023px
    lg: "30vw", // the cube will have a width of 30vw when screen width from 1024px to 1279px
    xl: "25vw", // the cube will have a width of 25vw when screen width from 1280px to 1535px
    "2xl": "20vw", // the cube will have a width of 20vw when screen width from 1536px and beyond
  }
  Copy

  3. Sizing with custom breakpoints and a CSS variable

  If you want custom breakpoints, you should set the --cube-css-size CSS variable on the cube or any wrapping component above with your own breakpoints.

  You should set useCSSVariableForCubeSize to true so that the cube doesn't show errors because you didn't provide a sizes object or the string "default" to the parameter sizes.

  The CSS sizing has priority even if the variable useCSSVariableForCubeSize is not set. So if you want to use the sizes object, make sure to not provide the CSS variable.

  .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;
     }
   }
  Copy

   <Cube
     perspective="none"
     transitionDuration="1s"
     transitionTimingFunction="linear"
     currentFace="front"
     faces={faces}
     useCSSVariableForCubeSize={true}
     // or just useCSSVariableForCubeSize since the prop value will default to true
   />
  
  Copy