Styled Tagged Text

Text component for React and React-Native application. Apply custom styles on specifics parts of your text, by enclosing them with bracket tags. Typically useful when using internationalization.

Features

🧘 Easy to use: Define a StyleSheet and the style will be applied to all text enclosed with tags, using keys as tag name.
👩‍💻 Web and 📱 Mobile: Use everywhere. You can use the same logic to apply rich text in your website and in your React-Native mobile app.
🛠 TypeScript support: styled-tagged-text is written entirely in TypeScript
🐥 Lightweight: Small library with no dependency resulting in a 5kb bundle

Usage

Installation

npm install @betomorrow/styled-tagged-text

React-native component

// style
const tagsStyle = StyleSheet.create({
    b: { fontWeight: "700" },
    i: { fontStyle: "italic" },
    emph: { color: "#eb4034", fontSize: 16 },
});

// Component
import { StyledTaggedText } from "@betomorrow/styled-tagged-text";

<StyledTaggedText tagsStyle={tagsStyle}>
    Normal [b]Bold[/b] [i][b]Bold Italic[/b] Italic[/i] [emph]Emphasize[/emph]
</StyledTaggedText>;

Render:

Render

Use <StyledTaggedText> exactly like a <Text> components.

Properties

tagsStyle : A record of style. Keys correspond to the tag name.
All Text (span on web) properties.

React component

// Define your style
const tagsStyle = {
    b: { fontWeight: "bold" },
    i: { fontStyle: "italic" },
    emph: { color: "#eb4034", fontSize: 16 },
};

// Component
import { StyledTaggedSpan } from "@betomorrow/styled-tagged-text";

<StyledTaggedSpan tagsStyle={tagsStyle}>
    Normal [b]Bold[/b] [i][b]Bold Italic[/b] Italic[/i] [emph]Emphasize[/emph]
</StyledTaggedSpan>;

Use <StyledTaggedSpan> exactly like a <span> components.

How it works ?

Underneath, StyledTaggedText (StyledTaggedSpan on web) are just nested Text (span) components with inline style. They have the exact same behavior, so you can transmit props as well.

<StyledTaggedSpan
    tagsStyle={{ b: { fontWeight: "bold" }, i: { fontStyle: "italic" }, emph: { color: "#eb4034", fontSize: 16 } }}>
    Normal [b]Bold[/b] [i][b]Bold Italic[/b] Italic[/i] [emph]Emphasize[/emph]
</StyledTaggedSpan>

Will render exactly:

<span>
    Normal
    <span style="font-weight: bold;">Bold</span>
    <span style="font-style: italic;">
        <span style="font-weight: bold;">Bold Italic</span>
        Italic
    </span>
    <span style="color: rgb(235, 64, 52); font-size: 16px;">Emphasize</span>
</span>

Example Playground

CodeBox Playground

React-Native and Web demo are available in example folder

Tips

Define a global style and wrap our component to easily re-use the same stylesheet and tags.

import { StyledTaggedText } from "@betomorrow/styled-tagged-text";
import React from "react";
import { StyleSheet, TextProps } from "react-native";

interface StyledTextProps extends TextProps {
    children?: string;
}

export const StyledText = (props: StyledTextProps) => {
    const { children, ...otherProps } = props;
    return (
        <StyledTaggedText tagsStyle={tagsStyle} {...otherProps}>
            {children}
        </StyledTaggedText>
    );
};

const tagsStyle = StyleSheet.create({
    emph: {
        color: "#1b66e4",
    },
});

And everywhere else in your app:

<StyledText>Super [emph]cool ![/emph]</StyledText>

Package detail

@betomorrow/styled-tagged-text

readme