https://github.com/rejchev/react-string-binder
String binder allows you to replace keywords in plain text with ReactNode elements
https://github.com/rejchev/react-string-binder
binder keyword react react-node string-binder typescript
Last synced: about 1 month ago
JSON representation
String binder allows you to replace keywords in plain text with ReactNode elements
- Host: GitHub
- URL: https://github.com/rejchev/react-string-binder
- Owner: rejchev
- Created: 2025-04-03T13:04:44.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-03T13:47:30.000Z (about 2 months ago)
- Last Synced: 2025-04-03T14:36:13.922Z (about 2 months ago)
- Topics: binder, keyword, react, react-node, string-binder, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@rejchev/react-string-binder
- Size: 69.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React String Binder
A simple react string binder.
The StringBinder allows you to replace keywords in plain text with ReactNode elements
## Usage
### Keywords
A keyword in plain text must start with `$` and contain only `A-Za-z` with out any spaces.
```jsx
// keyword is $keyword
const success = `This is a $keyword.`;
// just not handled
const fail = `This is not a $1keyword`;
// keyword is $key
const watch = `This is not a $key_word`;
// multiply keys: $flowers, $crons
const multiple = "$flowers and $crowns.";
```
### Binds
Bind object keys must be same as keywords but with out `$`
```jsx
import {StringBinder} from "@rejchev/react-string-binder";
const sbinder = StringBinder.Instance();
const text = "This is a simple $example";
sbinder.bind(text, {
example:
})
```
## Usage example
```jsx
import {StringBinder} from "@rejchev/react-string-binder";
const sbinder = StringBinder.Instance();
const text =
"The spring sun warms the awakening nature. " +
"Birds chirp joyfully in the tree $crowns, $flowers stretch towards the heavenly surface. " +
"The air is filled with freshness and the aroma of the first flowers."
const element = sbinder.bind(text, {
crowns: crowns,
flowers: flowers
})
```