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-textReact-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:
Use <StyledTaggedText> exactly like a <Text> components.
Properties
-
tagsStyle: A record of style. Keys correspond to the tag name. - All
Text(spanon 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
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>