https://github.com/betomorrow/styled-tagged-text
Parse your text and transform it into multiple React components with custom styles
https://github.com/betomorrow/styled-tagged-text
Last synced: 9 months ago
JSON representation
Parse your text and transform it into multiple React components with custom styles
- Host: GitHub
- URL: https://github.com/betomorrow/styled-tagged-text
- Owner: BeTomorrow
- License: mit
- Created: 2021-08-04T16:38:02.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-27T17:00:15.000Z (over 3 years ago)
- Last Synced: 2025-08-08T14:02:54.637Z (11 months ago)
- Language: TypeScript
- Size: 1.69 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://bundlephobia.com/package/betomorrow/styled-tagged-text)
## Usage
### Installation
```bash
npm install @betomorrow/styled-tagged-text
```
### React-native component
```tsx
// style
const tagsStyle = StyleSheet.create({
b: { fontWeight: "700" },
i: { fontStyle: "italic" },
emph: { color: "#eb4034", fontSize: 16 },
});
// Component
import { StyledTaggedText } from "@betomorrow/styled-tagged-text";
Normal [b]Bold[/b] [i][b]Bold Italic[/b] Italic[/i] [emph]Emphasize[/emph]
;
```
Render:
Use `` exactly like a `` components.
### Properties
- `tagsStyle` : A record of style. Keys correspond to the tag name.
- All `Text` (`span` on web) properties.
### React component
```tsx
// Define your style
const tagsStyle = {
b: { fontWeight: "bold" },
i: { fontStyle: "italic" },
emph: { color: "#eb4034", fontSize: 16 },
};
// Component
import { StyledTaggedSpan } from "@betomorrow/styled-tagged-text";
Normal [b]Bold[/b] [i][b]Bold Italic[/b] Italic[/i] [emph]Emphasize[/emph]
;
```
Use `` exactly like a `` 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.
```TSX
Normal [b]Bold[/b] [i][b]Bold Italic[/b] Italic[/i] [emph]Emphasize[/emph]
```
Will render exactly:
```html
Normal
Bold
Bold Italic
Italic
Emphasize
```
## Example Playground
[CodeBox Playground](https://codesandbox.io/s/styled-tagged-text-qb8gf?file=/src/App.tsx)
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.
```TSX
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 (
{children}
);
};
const tagsStyle = StyleSheet.create({
emph: {
color: "#1b66e4",
},
});
```
And everywhere else in your app:
```TSX
Super [emph]cool ![/emph]
```