react-timber v1.0.2

react-timber

Simple debug component for React

Overview

A React component that outputs prop values wrapped in <pre><code> tags. Optionally you can console.log the prop values.

Install

yarn add react-timber

npm i react-timber

Usage

There are two output modes. By default Timber will render the passed props as a pretty printed JSON object inside <pre><code> tags. If you only want to log the props to the console you can pass the consoleLog prop.

import Timber from 'react-timber'
const ExampleApp = () => <Timber foo="bar" consoleLog />

Options:

Exapmle:

const SomeComponent = () => {
  const lumberjacks = [
    { name: 'Big Joe Mufferaw', origin: 'Canada'}, 
    { name: 'Paul Bunyan', origin: 'North America'}, 
    { name: 'Log Diver', origin: 'Canada'},
    { name: 'Johnny Canuck', origin: 'Canada'},
  ]
  const selected = lumberjacks.find(n => n.name === 'Paul Bunyan')
  return (
    <div>
      <Timber 
          className="purple" 
          PaulBunyan={selected} 
        />
        <Timber
          lumberjacks={lumberjacks}
        />
    </div>
  )
}

License MIT