⚙️ Babel plugin that automatically adds a console statement to React components and makes debugging easier
Babel plugin that automatically adds a console statement to React components and makes debugging easier.
NOTE: This package is not published to npm yet
yarn add --dev babel-plugin-render-logger
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>;
}
}
.babelrc
Use the logger only in development
.
{
"presets": ["react-app"],
"env": {
"development": {
"plugins": ["render-logger"]
}
}
}
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"
}]
]
}
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
}]
]
}
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"
}]
]
}
MIT © Dinesh Pandiyan