Skip to main content
Acts as a container for other components. Can be optionally styled to render a visible element (e.g. a colored background). Similar to a <div> in HTML. 
// See the "hello" component for an example of how to use the Box component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Box } from '#vcs-react/components';

  // ...
  return <Box id="main">{/* Render something like a video grid here */}</Box>;
}
The Box component will typically have a layout prop provided so the Box can act as a layout container for its children (i.e. the components inside the box). Often a Box doesn’t render anything itself, it just specifies the layout that gets inherited by its children. Nesting boxes inside boxes can be a productive way to break down your design into manageable units. See the section Layout API for more details.

​
Props

Properties specific to the <Box> component.
NameTypeDescriptionDefault value
transformObjectAn object defining transformations to be applied at the compositing stage. Supported child properties: rotate_deg (Number), which specifies the rotation of the component in degrees.null
blendObjectAn object of compositing-related properties. Supported child properties: opacity: (Number), which can range from 0 to 1 (0 is fully transparent, 1 is fully opaque). If you don’t pass a value for blend, or the object you pass doesn’t include opacity, it defaults to full opacity.null
clipBooleanControls whether the box clips the rendering of its children within its own layout frame.false
Properties available to all VCS components, including this one.
NameTypeDescriptionDefault value
idStringA name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.null
keyString, NumberThis prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.null
styleObjectAn object of style. Each component class has its own supported style properties. For example, the Text lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.{}
layoutArrayAllows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See Layout API for more details.null

​
style prop

The style prop accepts an object that can have the following values set.
NameTypeDescription
cornerRadius_pxNumberApply a rounded mask to the corners of the component.
fillColorStringSets the background color of the component.
strokeColorStringSets the outline color of the component.
strokeWidth_pxNumberSets the width of the outline around the component in pixels.
Valid color format options:
  • Hex color codes
  • RGB or RGBA syntax
  • Standard CSS color names (e.g. ‘blue’)