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: 3 days 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 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-03T13:47:30.000Z (about 1 year ago)
• Last Synced: 2025-04-03T14:36:13.922Z (about 1 year 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
 



[![CI](https://github.com/rejchev/react-string-binder/actions/workflows/ci.yml/badge.svg)](https://github.com/rejchev/react-string-binder/actions/workflows/ci.yml)

[![LICENSE](https://img.shields.io/github/license/rejchev/sm-jansson)](LICENSE)



## About

A simple react string binder lib.

The StringBinder allows you to replace keywords in plain text with ReactNode elements

## Install

`npm i @rejchev/react-string-binder`

## Usage

### Keywords

A keyword in plain text must start & close with `$` and contain only `A-Za-z` with out any spaces (min len = 1).

```jsx

// keyword is $keyword$

const success = `This is a $keyword$.`;

// just not handled

const fail = `This is not a $1keyword`;

// just not handled

const watch = `This is not a $key_word`;

// multiply keys: $flowers, $crons

const multiple = "$flowers$ and $crowns$.";

```

### Binds

Keys of bindable `ReactNode` | `string` must be same as keywords but without `$`

```jsx

import StringBinderInstance from "@rejchev/react-string-binder";

const text = "This is a simple $nl$";

const result = StringBinderInstance.bind(text, {

    nl: 


})


```

## Usage example

```jsx

import StringBinderInstance, {StringBinderT} from "@rejchev/react-string-binder";

function App() {

  const text =

    "The spring sun warms the awakening nature. $n$" +

    "Birds chirp joyfully in the tree $crowns$, $flowers$ stretch towards the heavenly surface. $n$" +

    "The air is filled with freshness and the aroma of the first flowers."

  const unknownKeys =

    // Test variant 


    "Test $variant$ $n$" +

    // Test another_variant 


    "Test another_$variant$ $n$" +

    // Test third_variant_variant

    "Test third_$variant$_variant"

  const oneMore =

    // Test flowersflowers 


    "Test $flowers$flowers $n$" +

    // Test flowersflowers 


    "Test $flowers$flowers$ $n$" +

    // Test flowersflowers 


    "Test $flowers$$flowers$ $n$"

  const binder : StringBinderT = {

    crowns: crowns,

    flowers: flowers,

    n: 
,

  }

  return (

    <>

      


        {StringBinderInstance.bind(text, binder)}

      

      


        {StringBinderInstance.bind(unknownKeys, binder)}

      

      


        {StringBinderInstance.bind(oneMore, binder)}

      

    >

  )

}

```