Text

Import

import { Text } from '@blasterjs/core'

Basic Usage

Exposes text based props: color, fontFamily, fontSize, fontWeight, fontStyle, textAlign, lineHeight, letterSpacing, textDecoration, textOverflow, textShadow, textTransform.

The <Text> component renders a <span> with basic styles by default.

Hello world

This is a paragraph

 
<Text>Hello world</Text>
<br />
<Text as="p">This is a paragraph</Text>

Pre

 
<Text as="strong">Strong</Text>
<br />
<Text as="b">Bold</Text>
<br />
<Text as="i">Italic</Text>
<br />
<Text as="u">Underline</Text>
<br />
<Text as="abbr">I18N</Text>
<br />
<Text as="del">Deleted</Text>
<br />
<Text as="em">Emphasis</Text>
<br />
<Text as="s">Strikethrough</Text>
<br />
<Text as="code">Code</Text>
<br />
<Text as="pre">Pre</Text>

Prop styling

I am bold
Primary color

Small and centered

 
<Text fontWeight="bold">I am bold</Text>
<br />
<Text color="primary">Primary color</Text>
<br />
<Text textAlign="center" fontSize="12px" as="p">
  Small and centered
</Text>

PropTypes

Prop	Type	Description
`COMMON`	Style Prop	see Style Props
`TYPOGRAPHY`	Style Prop	see Style Props
`FLEX_ITEM`	Style Prop	see Style Props

Theming

Schema

 
{
  fonts: {
    fontFamily
  },
  fontSizes: {
    fontSize
  },
  lineHeights: {
    lineHeight
  },
  styles: css`
    ...
  `
}

BlasterJS