react-component-controller
v11.4.6
Published
Controller for managing component state React applications
Downloads
96
Readme
react-component-controller
Core concepts:
Controller holds all business logic for the component. Components itself must be as dumb as possible. Component can hold state of something like dropdown is open or not via
React.useState()
;Before the first component render optional
onInit
is called on the controller, if present. If it returns function, it will be called upon component unmount. This unmount callback can be explicitly described inonDestroy
optional function.what was passed as argument for
createHookWithContext
will be accessible asthis.ctx
inside controller class. usually the result of it is exported and used asuseController()
React hook later.if props needed, pass them as 2-nd argument to
useController(ComponentController, props)
. They will be accessible asthis.props
. Also it might be the case for tests, ifcontroller
is passed as prop to component,useController
will use it instead of creating new controller instance.props are updated on every component call.
Controllers can be re-used inside other components or controllers via
createReactController()
Controller can be passed down the line of components as a prop, use
UseReactController
typing to type this prop in consumers.
Usage (mobx example)
- refer to ./src/ReactController.spec.ts
// file ./ComponentController.ts
export class ComponentController extends Controller {
@observable someProp: number;
onInit = () => {
this.ctx.appStore.someFunction();
runInAction(() => this.someProp = 1);
};
}
// file ./ServicesContext.ts
export const ServicesContext: React.Context<Services> = React.createContext(null);
// file ./Controller.ts
export const useController = createHookWithContext(ServicesContext);
export class Controller<P = any> extends ReactController<Services, P> {}
// file ./Component.tsx
export const Component: React.FC = observer(() => {
const controller = useController(ComponentController);
return (
<div>{controller.someProp}</div>
);
});