https://github.com/kitce/react-with-traverse

Traverse into React component tree and transform the deepest strings to anything
https://github.com/kitce/react-with-traverse

Last synced: about 1 month ago
JSON representation

Traverse into React component tree and transform the deepest strings to anything

• Host: GitHub
• URL: https://github.com/kitce/react-with-traverse
• Owner: kitce
• License: mit
• Created: 2018-05-28T20:22:03.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-01T17:45:12.000Z (over 6 years ago)
• Last Synced: 2024-10-22T20:53:51.696Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 102 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hk-open-source - react-with-traverse - 對整個React component tree內每個最深層的string進行任何處理。[](https://github.com/kitce/react-with-traverse/stargazers) (Javascript)

README

        
# react-with-traverse

A HOC (Higher-Order Component) that allows you to traverse into the React component tree to do something on each of the deepest strings, such as highlight keywords, censor sensitive content and etc.

## Installation

```bash

# npm

npm install react-with-traverse

# yarn

yarn add react-with-traverse

```

## Usage

This module exposes a single function.

```javascript

// ES6+

import withTraverse from 'react-with-traverse';

// ES5

const withTraverse = require('react-with-traverse');

```

### withTraverse(transform : Function) : Component

#### transform(child : Any, props : Object) : Node

`child` : Each of the deepest strings in the component tree (probably ``, unless you do something like `
{}
`)


`props` : The props for the result component

Use this function to transform `child` into anything you want by returning it.

Example:

```javascript

const convertToSmileEmoji = (child, props) => {

  const {large} = props;

  if (child === ':smile:') {

    const src = large ? 'smile_large.png' : 'smile.png';

    return ;

  }

  return child;

};

const Smile = withTraverse(convertToSmileEmoji);



  

    Some text

    :smile:

  



```

Result :

```html



  Some text

  



```

## Test

(Test cases are also examples)

```bash

# npm

npm install

npm test


# yarn

yarn install

yarn test