okto-js
How it works?
okto-js
brings IoC
functionality into React.
How to use it
- Create a service
import { inject, injectable } from "inversify";
export const IConfigRetriever = Symbol("IConfigRetriever");
export interface IConfigRetriever {
retrieve(): any;
}
@injectable()
export class ConfigRetriever extends IConfigRetriever{
constructor(@inject("Config") private config: any) {}
public retrieve(): any {
return this.config;
}
}
- Create a module and register the service in it.
import { interfaces } from "inversify";
import { IModule } from "okto-js";
import { IConfigRetriever, ConfigRetriever } from './ConfigRetriever';
export class ConfigModule implements IModule, IViewModelsModule {
modules(container: interfaces.Container): void {
container.bind<IConfigRetriever>(IConfigRetriever).to(ConfigRetriever);
}
}
- Create a component where use the service
import { useState, useEffect } from "react";
import { useContainer } from "okto-js";
import { IConfigRetriever } from './ConfigRetriever';
export function Config = () => {
const retriever = useContainer<IConfigRetriever>(IConfigRetriever);
const [config, setConfig] = useState<any>({});
useEffect(() => setConfig(retriever.retrieve()), [retriever]);
return <div>{JSON.stringify(config)}</div>
}
- Register and run the app
import "reflect-metadata";
import * as React from "react";
import { Application } from "okto-js";
import { Config } from "./Config";
import { ConfigModule } from "./ConfigModule";
const app = new Application();
app.register(new ConfigModule());
// Here you can add as many Module as you want :)
app.run(() => <Config />);