react-logic-hoc

React Logic HOC

Idea

1. Write dumb components based on props only
2. Consume hook from context
3. Get new props with some logic from hook
4. Now dumb components is smart components

Getting Started

Create component

// create context
import React from 'react';
import withLogic from 'react-logic-hoc';

export const ComponentContext = React.createContext();

// create component
export const Component = (props) => {
    /* Component */
};

// wrap component
const WithLogicComponent = withLogic(ComponentContext)(Component);

export default WithLogicComponent;

Provide logic

// create logic hook
const useComponentLogic = (props) => {
    /* Logic */

    return propsWithLogic;
};

// provide logic
<ComponentContext.Provider value={useComponentLogic}>
    <WithLogicComponent />
</ComponentContext.Provider>

Advanced

Use composeProviders for reduce complexity

import React from 'react';
import { composeProviders } from 'react-logic-hoc';

// full page logic
const LogicProvider = composeProviders(
    [HeaderContext, useHeaderLogic],
    [SidebarContext, useSidebarLogic],
    [ContentContext, useContentLogic]
);

const Page = () => (
    <LogicProvider>
        <Main />
    </LogicProvider>
);

API

withLogic

takes one argument Context and return HOC

composeProviders

takes arguments [Context, value] and return component that render children