Skip to content
⚙️ Babel plugin that automatically adds a console statement to React components and makes debugging easier
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.babelrc.js
.gitignore Base code - things work now - needs more tests Nov 20, 2019
README.md Remove 'react' from name Dec 3, 2019
package.json
yarn.lock Base code - things work now - needs more tests Nov 20, 2019

README.md

babel-plugin-render-logger

Babel plugin that automatically adds a console statement to React components and makes debugging easier.

Install

NOTE: This package is not published to npm yet

yarn add --dev babel-plugin-render-logger

Example

Transforms

const HelloWorld = () => {
  return <span>Hello World</span>;
};

class HelloWorld extends React.Component {
  render() {
    return <span>Hello World</span>;
  }
}

to

const HelloWorld = () => {
  console.log('>> RenderLog >>', 'HelloWorld');
  return <span>Hello World</span>;
};

class HelloWorld extends React.Component {
  render() {
    console.log('>> RenderLog >>', 'HelloWorld');
    return <span>Hello World</span>;
  }
}

Usage

.babelrc

Use the logger only in development.

{
  "presets": ["react-app"],
  "env": {
    "development": {
      "plugins": ["render-logger"]
    }
  }
}

Config

name

All components will log by default. You can pass in the component name as a string or regex and only components that match the name will be logged.

Log all components matching the name "Hello"

{
  "plugins": [
    ["render-logger", {
      "name": "Hello"
    }]
  ]
}

Log all components matching the name "Hello" or "Welcome"

{
  "plugins": [
    ["render-logger", {
      "name": "Hello|Welcome"
    }]
  ]
}

disableConsoleStyles

Disable the styles in console statements. To differentiate the log noise, the console statements are colored by default.

{
  "plugins": [
    ["render-logger", {
      "name": "Hello|Welcome",
      "disableConsoleStyles": true
    }]
  ]
}

consoleMethod

Default console method is info (console.info()). You can choose to use a different method. Accepts warn, error, trace, info and log;

{
  "plugins": [
    ["render-logger", {
      "name": "Hello|Welcome",
      "disableConsoleStyles": true,
      "consoleMethod": "warn"
    }]
  ]
}

License

MIT © Dinesh Pandiyan

You can’t perform that action at this time.