Stupidism/stupid-rc-starter

Hoc-style React Component Starter with storybook integrated

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>

2. 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);

3. Counter - Pure component to render count

import { Counter } from 'react-render-counter';

<div>
  <Counter count={1} /> 
</div>

4. 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.