React higher-order components for debugging.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
.babelrc
.gitignore
.npmignore
README.md
package.json
yarn.lock

README.md

rhoc

A collection of React higher-order components for useful for development.

Especially useful with other higher-order components and stateless functions.

Example

import React from "react";
import { props } from "rhocs";

const Widget = props => (
  <div>....</div>
);

// Widget's props will be output to console on each rerender
export default props()(Widget);

Alternatively, require it inline to make it easy to remove when finished:

export default require('rhocs').props()(Widget)

Available HOCs

changedProps

Logs object containing all props that changed since the last rerender (using shallow comparison).

props([selector])

Logs all of the component's props. A props selector may optionally be passed as can be a string ('prop1'), array of strings (['prop1', 'prop2']), or function ((props) => R.omit(['prop1'], props)). The following example logs only the name prop.

export default require('rhocs').logProps('name')(Widget)

rerenderEvent

Log each rerender (updated from the outside) event.

rerenderCount

Similar to rerenderEvent but also keeps track of and logs the count. Useful when there is more than one instance of element type logging rerender events.

Installation

Use npm/yarn (usually with --dev)

More

Originally written about in this post.