react-text-replace
A package that makes replace jsx components content easier.
Last updated 5 months ago by nneutrinno .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install react-text-replace 
SYNC missed versions from official npm registry.

React Text Replace

A package that makes replace jsx components content easier.

Install

NPM

  • Use: import { textReplace, TextReplace } from 'react-text-replace'
  • Install: npm install --save react-text-replace

YARN

  • Use: import { textReplace, TextReplace } from 'react-text-replace'
  • Install: yarn add react-text-replace

Usage

Basic Example

import React from "react"
import { textReplace } from "react-text-replace"
import uuidv1 from "uuid/v1"

const App = props =>
  textReplace({
    source: ">> Hello >> world >> !!",
    find: />>(.*)/,
    call(match, $1) {
      return <h1 key={uuidv1()}>{$1}</h1>
    }
  })

First Result

<h1> Hello >> world >> !!</h1>

Multiple Replaces Example

import React from "react"
import { textReplace } from "react-text-replace"
import uuidv1 from "uuid/v1"

const source = ">> Hello >> world >> !!"

const options = [
  {
    find: />>(.*)/,
    call(match, $1) {
      return (
        <span style={{ fontSize: "2em" }} key={uuidv1()}>
          {$1}
        </span>
      )
    }
  },
  {
    find: /!!/,
    call(match) {
      return <i key={uuidv1()}>{match}</i>
    }
  }
]

var App = props =>
  textReplace(source, options) || textReplace(source, ...options)

The Result Will Be

<span style="font-size: 2em">
  Hello >> world >> <i>!!</i>
</span>

Recursive Example With Caching

import React from "react"
import { TextReplace } from "react-text-replace"
import uuidv1 from "uuid/v1"

// Creates a cache that lasts until close the page

const App = props => (
  <TextReplace
    source={">> Hello >> world >> !!"}
    pipe={[
      {
        find: />>(.*)/,
        call(match, $1) {
          return (
            <span style={{ fontSize: "2em" }} key={uuidv1()}>
              {$1}
            </span>
          )
        },
        isRecursive: true
      },
      {
        find: /!!/,
        call(match) {
          return <i key={uuidv1()}>{match}</i>
        }
      }
    ]}
  />
)

Will Result In

<span style="font-size: 2em"> Hello 
  <span style="font-size: 2em"> world 
    <span style="font-size: 2em">
      <i>!!</i>
    </span>
  </span>
</span>

License

Licensed under permissive MIT license

Current Tags

  • 0.1.3                                ...           latest (5 months ago)

14 Versions

  • 0.1.3                                ...           5 months ago
  • 0.1.2                                ...           5 months ago
  • 0.1.1                                ...           5 months ago
  • 0.1.0                                ...           5 months ago
  • 0.0.91                                ...           5 months ago
  • 0.0.9                                ...           5 months ago
  • 0.0.8                                ...           5 months ago
  • 0.0.7                                ...           5 months ago
  • 0.0.6                                ...           5 months ago
  • 0.0.5                                ...           5 months ago
  • 0.0.4                                ...           5 months ago
  • 0.0.3                                ...           6 months ago
  • 0.0.2                                ...           6 months ago
  • 0.0.1                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 15
Last Day 0
Last Week 14
Last Month 0
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |