ncode_react_lib

npm version

Install

yarn add @ncodedcode/ncode_react_lib
  • index.tsx

import React from "react";

// add this
NCApplicationContext.createContext(new NCDefaultApplicationConfiguration()); 

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Custom Configuration

  • implements NCApplicationConfiguration

export class AppConfiguration implements NCApplicationConfiguration {
  application(app: NCApplicationContext): void {
    app.devMode = process.env.REACT_APP_ENV_TYPE === "dev";
    NCLog.setLogLevel(NCLogLevel.Debug);
  }

  config(container: ServiceLocator): void {
      // set up dependency injection
  }
}
  • init Context with Custom Configuration
NCApplicationContext.createContext(new AppConfiguration());

Use LocalStorage as a default NCStorage

  • implements NCStorage

import { NCStorage } from "@ncodedcode/ncode_react_lib";

export class LocalStorage implements NCStorage {
  contains(key: string): Promise<boolean> {
    return Promise.resolve(!!localStorage.getItem(key));
  }

  delete(key: string): Promise<boolean> {
    return this.contains(key).then((exist) => {
      if (exist) localStorage.removeItem(key);
      return exist;
    });
  }

  load(key: string): Promise<string | null> {
    return Promise.resolve(localStorage.getItem(key) || null);
  }

  save(key: string, value: string): Promise<boolean> {
    if (!value) return this.delete(key);
    localStorage.setItem(key, value);
    return Promise.resolve(true);
  }
}
  • regist instance

export class AppConfiguration implements NCApplicationConfiguration {
  config(container: ServiceLocator): void {
    container.registFactory(NCStorageClassName, () => new LocalStorage());
  }
}

Use dayjs as a default NCDating

  • implements NCDating

export class DayjsDating implements NCDating {
  private _day: Dayjs = dayjs();

  constructor() {
    dayjs.extend(utc);
    dayjs.extend(timezone);
    dayjs.extend(relativeTime);
    dayjs.extend(duration);
  }

  now(): NCDating {
    this._day = dayjs();
    return this;
  }

  create(m: number): NCDating {
    this._day = dayjs(m);
    return this;
  }
  ...
}
  • regist instance

export class AppConfiguration implements NCApplicationConfiguration {
  config(container: ServiceLocator): void {
    container.registFactory(NCDatingClassName, () => new DayjsDating());
  }
}

TO-DO

[ ] Default FetchNetworking
[ ] NCNetwork.setBaseUrl

Example Project

  • run

cd example
yarn install
yarn start

GitHub

View Github