README
React Logic HOC
Idea
- Write dumb components based on props only
- Consume hook from context
- Get new props with some logic from hook
- 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