react-transform-words

A React component that transforms individual words in a block of text with css classes and actions.

Install

yarn add react-transform-words

or

npm install --save react-transform-words

Usage

Check out the demo for some simple examples.

import React, { Component } from 'react'

import Transformer from 'react-transform-words'

class ExampleTransformer extends Component {
  matchWords = [
    {
      word: 'fat',
      caseSensitive: true,
    },
    {
      word: 'cultivating mass', // can be a phrase
      action: 'click',
      className: 'clicky-word', // set a custom css class
      actionCallback: () => { console.log('clicked!!') } // captures action (on click)
    }
  ]
  render () {
    return (
       <Transformer
        matchWords={this.matchWords}
        displayText={"I’m not fat. I’m cultivating mass. -Fat Mac"} />
    )
  }
}

The above would result in this:

So, we're passing in an array with one word and one phrase to transform.

• We didn't provide a className for fat, so it used the built-in default.
• Notice that "fat" isn't matching both occurances because we've passed in caseSensitive: true for that word.

Props

| Property | Type | Required | Default | Description | | :----------- | :------------- | :------: | :----------------- | :----------------------------------------------------------------------------- | | matchWords | Array<Object> | No | | Array of word objects that the transformer will match (see below) | | displayText | String | Yes | | The text to match words within | | defaultClass | String | No | built-in highlight | The class applied to matched words that don't have a class provided themselves |

Search Word Objects

An array of word objects are passed to the Transfomer are used by the component to search for and apply class changes. Each word can have its own options, allowing you to customize each with CSS, actions and more. These are the word object options:

| Option | Type | Options | Default | Description | | :------------- | :------- | :-------------------------------------------: | :----------------- | :-------------------------------------------------------------------------------------------------------------- | | word | String | | | The word to match and transform | | className | String | | props.defaultClass | Applies the className to the word | | action | String | 'click', 'doubleclick', 'mouseover', 'change' | | Adds the action to the word (use with actionCallback or replaceText) | | actionCallback | Function | | | The function to be called when the user triggers the action (ie, clicks the word) | | replaceText | String | | | The text to replace the word with if using the 'change' action | | format | String | 'regex', 'string' | 'string' | If set to 'regex', regular expression characters will not be escaped. This treats the string as a normal regex' | | extraProps | Object | | | Each key/value will be added as attributes to the highlighted word's <span> tag |

Word Object Examples

[
  {
    word: "search for me" // at a minimum, can accept just a word/phrase and the defaultClassName will be used
  },
  {
    word: "search for me", // word to search for, can be a phrase or a single word
    className: "my-custom-class", // class to apply to the word
    action: "doubleclick", // adds onDoubleClick to the word
    actionCallback: handleDoubleClicked, // function will be called when double-clicked
  },
  {
    word: "me too", // word to search for, can be a phrase or a single word
    className: "my-custom-class", // class to apply to the word
    action: "change", // changes the word to replaceText property
    replaceText: "new text" // text that will be used with action 'change'
  }
  {
    word: "\\bexact\\b", // text with regex that matches only the full word 'exact'. Using double-slash to escape
    format: 'regex', // tells the transformer to use the string as regex instead of a normal string, which has regex characters escaped by default
    extraProps: {
      title: "A title for the highlight",
      lang: 'en'
    },
  }
]

License

MIT © codyparker | codyparker.com