VCS Text component

Renders the provided text, which can optionally overflow onto multiple lines. Similar to a <p> element in HTML. Text components typically have a style and layout prop provided to define how the text looks and where it should be placed within the parent layout container.

// See the "hello" component for an example of how to use the Text component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Text } from '#vcs-react/components';

const labelStyle = {
  textColor: 'white',
  fontFamily: 'Roboto',
  fontWeight: '600',
  fontSize_px: 16,
};

  return <Text style={labelStyle}>Hello world</Text>;
}

VCS doesn’t have a style inheritance cascade like in CSS, so if you don’t pass the style prop, your text will get global default styling.

Props

Properties specific to the <Text> component.

Name	Type	Description	Default value
`transform`	`Object`	An object defining transformations to be applied at the compositing stage. Supported properties: `rotate_deg` (Number), which specifies the rotation of the component in degrees.	`null`
`blend`	`Object`	An 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`
`clip`	`Boolean`	Controls whether the box clips the rendering of its children within its own layout frame.	`false`

Properties available to all VCS components, including this one.

Name	Type	Description	Default value
`id`	`String`	A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.	`null`
`key`	`String`, `Number`	This 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`
`style`	`Object`	An 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.	`{}`
`layout`	`Array`	Allows 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.

Name	Type	Description
`textColor`	`String`	Color of text to be rendered. Valid CSS values are accepted.
`fontSize_gu`	`Number`	Size of font in `gu` (grid units), a relative. Refer to the VCS docs for information on grid units. unit.
`fontSize_px`	`Number`	Size of font in `px` (pixel), an absolute unit.
`fontFamily`	`String`	Font family to render text in. Accepted values: `Roboto`, `RobotoCondensed`, `Anton`, `Bangers`, `Bitter`, `Exo`, `Magra`, `PermanentMarker`, `SuezOne`, `Teko`
`fontStyle`	`String`	Font style to render text in. Accepted values: `normal`, `italic`
`fontWeight`	`String`	Font weight to render text in. Accepted values: `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`
`strokeColor`	`String`	Color of outline around text characters.
`strokeWidth_px`	`Number`	Stroke width in pixels of outline around text characters.

Valid color format options:

Hex color codes
RGB or RGBA syntax
Standard CSS color names (e.g. ‘blue’)

Getting Started

Core Concepts

Components

Custom React Hooks

Tools

VCS Text component

Props

`style` prop

​Props

​style prop

Props

`style` prop