n.code react application context library

Overview

ncode_react_lib

npm NPM

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

  • Test Environment
  • Lint Environment
  • PR github Action
  • Default FetchNetworking
  • NCNetwork.setBaseUrl

Example Project

  • run
cd example
yarn install
yarn start
You might also like...

This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundl

Jan 6, 2023

This repository store the source code of a chat application built in NextJS.

This repository store the source code of a chat application built in NextJS.

This repository store the source code of a chat application built in NextJS. The code was built in alura's React event, and here I styled the code to make it unique and creative!

Mar 31, 2022

An open source application to create, manage and embed contact forms on static/dynamic sites with no code

An open source application to create, manage and embed contact forms on static/dynamic sites with no code

Formify is an open source application that lets you create, manage and embed contact forms on any site without writing code. This project is done as a

Dec 26, 2022

This is a calculator application. The user can do some calculations on this application.

Math Magicians This is a calculator application. The user can do some calculations on this application. Built with: Reactjs Redux Live Live demo deplo

May 15, 2022

A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Travelers' Hub A web application for a company that provides commercial and scientific space travel services. The application allows users to bo

Oct 14, 2022

Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open-source toolkit for building content management directly into your website. Community Forum Getting Started Checkout the tutorial to ge

Jan 1, 2023

Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Jan 7, 2023

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Dec 29, 2022

Code for How to Internationalize (i18n) a React App with Transifex

Code for How to Internationalize (i18n) a React App with Transifex Code for How to Internationalize (i18n) a React App with Transifex Tutorial Prerequ

Dec 15, 2022
Comments
  • (feat): NCNetwork : baseUrl 기능 추가

    (feat): NCNetwork : baseUrl 기능 추가

    작업내용

    • NCNetworking의 구현체(예시 : AxiosNetworking)는 baseUrl을 필수로 받아야 합니다. 이와 함께 baseUrl을 변경하기 위한 setNewBaseUrl()을 구현해야 합니다.
    • NCNetwork : string? 타입의 baseUrl를 받을 수 있습니다. 이 값이 있다면 NCNetworking의 baseUrl을 변경할 수 있습니다.
    • NCNetworking.execute()에서는 baseUrl을 기본으로 가지고 있으므로, NCNetwork에서는 url의 뒷부분만을 넘겨주면 됩니다.
    • example에 위 사항이 적용되도록 반영했습니다. (테스트 역시 진행했습니다.)
    opened by kghdcode 4
  • Feature/add ncode router

    Feature/add ncode router

    NCODE ROUTER 생성.

    • REACT ROUTER 6버전 기준으로 만들어짐.

    • 사용법 추가 만약 그냥 원하는대로 사용안할 경우, error MSG에 사용법 관련 url 첨부 image

    • Example Code 에 클래스형태든, 함수형태든 국한되지 않고 모든 컴포넌트에서 사용할 수 있도록 HOC를 만드는 예제 추가

    opened by HYEOK999 2
Owner
N.code
N.code
Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Efecan Pınar 24 Sep 6, 2022
Nextjs CRUD with React Context API and Tailwind CSS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Fazt Web 23 Sep 25, 2022
use this to replace redux,you can use useActions to change context value and useActions return a mutable function collection

English | 中文 NOTE react-context-mutation is a lighter and more convenient state manager designed for react applications. It aims to replace the Redux

null 19 Feb 22, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

null 24 Dec 22, 2022
Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Conor Broaders 3 Oct 11, 2021
Companion React+TypeScript code for my Intro to TypeScript EmergentWorks workshop, bootstrapped with yarn + create-react-app! ✨

Getting Started with Create React App This project was bootstrapped with Create React App. Companion repository to https://github.com/JoshuaKGoldberg/

Josh Goldberg 2 Dec 21, 2022
Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose.

spa-store Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose. Contributing Feedback Roadmap Releases Check

Luis Falcon 2 Jul 4, 2022
React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Pranav Teegavarapu 8 Jan 3, 2022