react-evefyou-app
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

React-Evefyou-App

Simple and easy to use react application template design UI library.

English | 中文

✨ Features

  • Only one App entry without setup router, fetch, store.
  • React18+ React-router6+
  • Conventional Routing
  • Simple and easy-to-use fetch based on react-query
  • Based on recoil, store status can be defined in react like pinia
  • You can register properties in react instead of assigning them directly
  • KeepAlive Router
  • Using Ant Design UI
  • Using Tailwind Windicss and css inject in every component
  • Using react-intl to implement internationalization processing
  • Using react-evefyou-hooks define inheritable state hooks and support typecript
  • Base Vite build

📦 Install

npm install react-evefyou-app
yarn add react-evefyou-app
pnpm add react-evefyou-app

🔨 Usage

import { AdminApp, AppImportMetaEnv, PageModule } from "react-evefyou-app";
import 'react-evefyou-app/windicss';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <AdminApp
    version={pkg.version}
    name={pkg.name}
    author={pkg.author.name}
    env={import.meta.env as unknown as AppImportMetaEnv}
    locales={locales}
    pageModules={import.meta.glob<PageModule>('/src/views/**/$*.{ts,tsx}')}
    recoilDebug
    strictMode
  />
);

Conventional Routing Page structure

common example

- pages
    - login (Already built into the library)
        $.ts
    - views
        $.ts (Already built into the library)
        $index.ts
        - dashboard
            $index.tsx
        - project
            $index.tsx
            $List.tsx
    - other
        $.ts

simple example

- views
    $index.ts
    - dashboard
        $index.tsx
    - project
        $index.tsx
        $List.tsx

Fetching data

import { queryFetch, queryFetchPage, MenuTreeList, Page } from "react-evefyou-app";
import { Project, ProjectReq } from '@models/project';

enum Api {
    GetProjectList = '/getProjectList',
}

export const queryGetProjectList = queryFetchPage<Page<Project>, ProjectReq>({ url: Api.GetProjectList })

queryGetProjectList.useQuery({
    params,
})
queryGetProjectList.useQueryRes({
    params,
})
queryGetProjectList.fetchQuery({
    params,
})

Package Sidebar

Install

npm i react-evefyou-app

Weekly Downloads

1

Version

0.0.7

License

MIT

Unpacked Size

1.78 MB

Total Files

663

Last publish

Collaborators

  • evefyou