Skip to content

JoakimSM/react-transform-tree

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

react-transform-tree

Utility to transform a react tree

Installation

npm i react-transform-tree

or

yarn add react-transform-tree

Usage

walk(sourceNode, handlersForKinds) is used to transform a React node tree into another one. handlersForKinds is an object accepting property names from the kinds object (see below), where each property value is a function used to transform that specific kind of node.

Accepting kinds: empty, text, fragment, domElement, componentElement

The transform function is passed a single object, which has the following properties:

  • node: the original node
  • kind: one of the kinds specified above
  • defaultHandler(): the default handler for the current kind
  • walkChildren(): a shortcut to traverse the children of the current node
  • walk: a recursive call to the walk function

To replace all div's with span's do something like this.

import { walk, kinds } from 'react-transform-tree';

walk(source, {
    [kinds.DOM_ELEMENT]: (path) => {
        const { node } = path;
        if (node.type === 'div') {
            return React.createElement(
                'span',
                node.props,
                ...path.walkChildren(),
            );
        }
        return path.defaultHandler();
    },
});

About

Utility to transform a react tree

Resources

License

Stars

Watchers

Forks

Packages

No packages published