react-replacer
Replace strings within a Reactjs component, to avoid using dangerouslySetInnerHTML
.
Usage
Single Config
replacer(replacement)(rawString | pattern)(pattern | rawString)
, the params order aims for curry
and the last two params must be either rawString and pattern
or pattern and rawString
, if you chose pattern as the last param, pattern's type can be both RegExp
or String
, otherwise it must be type of RegExp
. The type of replacement
can be both Function
or String
, and replacement
function will be feeded with ...[key, ...pattern.exec(match)]
.
Arguments
- replacement (Function | String)
- rawString (String) | pattern (RegExp)
- pattern (RegExp | String) | rawString (String)
Returns
Returns a React children array.
Example
import replacer from 'react-replacer' let highlighter = 'This should be hightlighted!' <h3 ="sidebar-friendlist__name"> </h3> <h3><span>This should be </span><span ="highlight">highlight</span><span>ed!</span></h3>
Group Config
greplacer(rules)(rawString)
Arguments
- rules (Array): The array of rule object, which contains two property
pattern
andreplacement
, they are just like the single config param. - rawString (String): The string to be processed.
Returns
(Array): Returns a React children array.
Example
import greplacer from 'react-replacer' let highlighter = 'This should be hightlighted!' <h3 ="sidebar-friendlist__name"> </h3> let decoder = <h3></h3> <h3><span>left </span><span ="highlight">highlight</span><span> and </span><span ="replaced">original replaced</span><span>ed!</span></h3>