MultinaireText

Theme-aware text component with i18n support, text decoration, alignment, and loading states.

Basic Usage

import { MultinaireText } from '@multinaire/multinaire-design';

<MultinaireText>Hello World</MultinaireText>

<MultinaireText type="heading" weight="bold" color="primary">
  Styled Text
</MultinaireText>

Props

Prop	Type	Default	Description
type	StyleKeys	'body'	Text style preset. Options: 'display', 'heading', 'subheading', 'title', 'body', 'caption'
weight	TextKeys	'regular'	Font weight. Options: 'regular', 'medium', 'bold'
color	ColorKeys	'onBackground'	Text color key from the active theme palette
alignment	TextStyle['textAlign']	—	Text alignment. Equivalent to textAlign property
decoration	TextStyle['textDecorationLine']	—	Text decoration line. Equivalent to textDecorationLine property
transform	TextStyle['textTransform']	—	Text transform. Equivalent to textTransform property
center	boolean	false	⚠️ Deprecated. Use alignment="center" instead
margin	SpacingProps	—	Outer margin. Accepts a number for uniform margin, or an object for per-side control
flex	number	—	Flex grow value
isLoading	boolean	false	Show a loading skeleton in place of the text
textWidth	number	200	Width of the loading skeleton in pixels
translate	boolean	true	When true, string children are passed through the i18n translation function. Defaults to true

All standard React Native TextProps are also supported and forwarded.

Examples

Text Styles

<MultinaireText type="heading">Heading</MultinaireText>
<MultinaireText type="subheading">Subheading</MultinaireText>
<MultinaireText type="body">Body text</MultinaireText>
<MultinaireText type="caption">Caption</MultinaireText>

Font Weights

<MultinaireText weight="regular">Regular</MultinaireText>
<MultinaireText weight="medium">Medium</MultinaireText>
<MultinaireText weight="bold">Bold</MultinaireText>

Colors

<MultinaireText color="primary">Primary</MultinaireText>
<MultinaireText color="secondary">Secondary</MultinaireText>
<MultinaireText color="error">Error</MultinaireText>

Text Alignment

<MultinaireText alignment="center">Centered text</MultinaireText>
<MultinaireText alignment="right">Right-aligned text</MultinaireText>
<MultinaireText alignment="justify">Justified text</MultinaireText>

Text Decoration

<MultinaireText decoration="underline">Underlined text</MultinaireText>
<MultinaireText decoration="line-through">Strikethrough text</MultinaireText>
<MultinaireText decoration="underline line-through">Both</MultinaireText>

Text Transform

<MultinaireText transform="uppercase">UPPERCASE TEXT</MultinaireText>
<MultinaireText transform="lowercase">lowercase text</MultinaireText>
<MultinaireText transform="capitalize">Capitalized Text</MultinaireText>

Loading State

<MultinaireText isLoading textWidth={150}>
  This text is loading
</MultinaireText>

With Translation

// Automatically translates using i18next
<MultinaireText>welcome_message</MultinaireText>

// Disable translation
<MultinaireText translate={false}>Literal text</MultinaireText>

Migration

The center prop is deprecated. Replace it with alignment="center":

// Before
<MultinaireText center>Centered text</MultinaireText>

// After
<MultinaireText alignment="center">Centered text</MultinaireText>