okto-core
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

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 />);

Readme

Keywords

none

Package Sidebar

Install

npm i okto-core

Weekly Downloads

1

Version

0.1.6

License

MIT

Unpacked Size

14.7 kB

Total Files

22

Last publish

Collaborators

  • pirropirro