Text
A convenience component for rendering text with shorthand style props.
Text renders a span with shorthand props for common text styling.
Import
import { Text } from "@fcannizzaro/streamdeck-react";Props
interface TextProps {
className?: string;
size?: number;
color?: string;
weight?: number;
align?: "left" | "center" | "right";
font?: string;
lineHeight?: number;
style?: CSSProperties;
children?: ReactNode;
}| Prop | CSS Property |
|---|---|
size | fontSize |
color | color |
weight | fontWeight |
align | textAlign |
font | fontFamily |
lineHeight | lineHeight |
Example
For most text, prefer Tailwind classes via className directly on <span> elements:
<span className="text-[24px] font-bold text-white text-center font-[Inter]">Hello</span>Text provides shorthand props as a convenience wrapper:
<Text size={24} color="white" weight={700} align="center" font="Inter">
Hello
</Text>Notes
- Font must be loaded in the plugin config for text to render. See Font Management.
- If a requested
fontWeightisn't loaded, the nearest available weight is used.