Text

Reference

• The Text component is a styled <span>.
• It is a flexible and reusable text element that applies styles dynamically based on the provided props and theme.

Props

1. lineHeight

   • Type: string
   • Default: From theme.fontVariants.text.lineHeight
   • Description: Sets the line height of the text.

2. color

   • Type: string
   • Default: From theme.fontVariants.text.color
   • Description: Sets the text color using the theme's colorPalette.

3. fontWeight

   • Type: string
   • Default: From theme.fontVariants.text.weight
   • Description: Sets the font weight of the text.

4. fontStyle

   • Type: string
   • Default: From theme.fontVariants.text.fontStyle
   • Description: Sets the font style (e.g., italic, normal).

5. padding / paddingTop / paddingRight / paddingBottom / paddingLeft

   • Type: string
   • Description: Sets padding for the text element.

6. height

   • Type: string
   • Description: Sets the height of the text element.

7. width

   • Type: string
   • Description: Sets the width of the text element.

8. textAlign

   • Type: string
   • Description: Sets the text alignment (e.g., left, center, right).

Usage Example

function Example(pageContext) {
        const { protrakComponents } = React.useContext(customWidgetContext);
        const { Text } = protrakComponents;
        return(
        <Text 
            color="PRIMARY" 
            fontWeight="bold" 
            lineHeight="1.5" 
            textAlign="center"
        >
            Hello, World!
        </Text>
        );
}

• This renders a bold, center-aligned text with a line height of 1.5 and the primary theme color.