what-props-changed

A simple React development tool to help find the props that caused a Component to update.

By default, it will log to the browser console any detected changes, with their original and new values.

// Example Output:

Sidebar, props changed: 1
 {
  "sidebar": {
    "old": "menu",
    "new": "list"
  }
}

Installation

# yarn
yarn add what-props-changed

# npm
npm install --save what-props-changed

Usage

import * as React from 'react'
import whatPropsChanged from 'what-props-changed'

class Sidebar extends React.Component {

  componentWillReceiveProps (nextProps) {
    whatPropsChanged(this.props, nextProps, 'Sidebar')
  }

  render() {
    return <div>{this.props.title}</div>
  }
}

Arguments

| Options | Type | Default | Description | |-----------|--------|---------|----------------------------------------------------------------------| | props | object | {} | Original (props or source) object | | nextProps | object | {} | Updated (props or source) object | | name | string | '' | Optional name or helpful description that will be logged with output | | options | object | options | Optional options object, see options below. |

Options

An object you can pass as the 4th argument when calling whatPropsChanged

| Options | Type | Default | Description | |----------|---------|---------|-----------------------------------------------------------------| | doReturn | boolean | false | Return the changes object | | string | boolean | true | Logs the changes as JSON.stringified for easier console viewing | | log | boolean | true | Log prop changes object to console |

Notes

what-props-changed provides a default export, you can use whatPropsChanged or whatChanged etc. You can also pass it generic objects to compare instead of props. It will iterate over the first object argument.

Additional Documentation

See src/index.js for source code.

/**
 * Logs to console, props that caused a Component to update
 *
 * @param  {Object} props     Component current props
 * @param  {Object} nextProps Component updated props
 * @param  {String} name      Component name or description for log
 * @param  {Object} opts      Additional options
 * @return {undefined}        Logs changes to console
 * @example

  // Usage

  componentWillReceiveProps (nextProps) {
    whatPropsChanged(this.props, nextProps, 'Sidebar')
  }

  // Add options if desired, as a 4th argument.
  // Default values included below

  const options = {
    doReturn: false, // return changed props object
    string: true, // log object instead of a JSON.stringified object
    log: true, // log results to console
  }

 */