Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

React higher-order components for debugging.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.