Skip to content

Stupidism/stupid-rc-starter

Repository files navigation

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),
);

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.