react-render-counter

README of starter

If you are here for the starter click above link
If you are here for the component library, this is it

Example Component: react-render-counter

RenderCounter is a tool component can be used in dev environment. It can tell you how many times each part of your component has been rendered.
This is composed with a HOC and a pure component to count render times
HOC is also useful when you want to track render times for your component.

Installation

yarn add --dev react-render-counter

or

npm install --save-dev react-render-counter

Usage

1. RenderCounter - withRenderCount(Counter)

import RenderCounter from 'react-render-counter';
 
<AnyComponent>
  <RenderCounter initialCount={0} />
</AnyComponent>

1. withRenderCount - High order component to provide data and logic

import { withRenderCount } from 'react-render-counter';
 
const MyCounter = ({ count }) => <div>{count + 1}</div>;
 
export default withRenderCount(MyCounter);

1. Counter - Pure component to render count

import { Counter } from 'react-render-counter';
 
<div>
  <Counter count={1} /> 
</div>

1. hocs - Some handy higher-order components.

API of hocs

// MyComponent.js
import withFoo from 'react-render-counter/hocs/withFoo';
 
const MyComponent = () => <div />;
 
export default withFoo(MyComponent);

// MyHoc.js
import compose from 'recompose/compose';
import withFoo from 'react-render-counter/hocs/withFoo';
import withBar from 'react-render-counter/hocs/withBar';
 
export default (fooOptions, barOptions) => compose(
  withFoo(fooOptions),
  withBar(barOptions),
);

Documentation

With storybook, things below are included in the site:

• online demo
• prop tables
• code examples
• TODO: comments

License

Copyright © 2017, Stupidism. Released under the MIT license.