# @ukpc-lib/react

> React components library

Latest version **0.16.17** (published 2026-09-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install @ukpc-lib/react
pnpm add @ukpc-lib/react
yarn add @ukpc-lib/react
bun add @ukpc-lib/react
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.16.17 |
| Published | 2026-09-28 |
| First published | 2024-01-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 37 |
| Unpacked size | 5.3 MB |
| Known vulnerabilities | 0 (+30 in 2 direct dependencies) |
| Install scripts | no |
| Author | Thinh Phung |
| Maintainers | intelli-park, vietlongn |

## Links

- npm: https://www.npmjs.com/package/@ukpc-lib/react
- npm.io page: https://npm.io/package/@ukpc-lib/react

## Dependencies (37)

- [i18n](https://npm.io/package/i18n.md) ^0.15.1
- [axios](https://npm.io/package/axios.md) 1.6.2
- [jquery](https://npm.io/package/jquery.md) ^3.7.1
- [moment](https://npm.io/package/moment.md) ^2.30.1
- [cssnano](https://npm.io/package/cssnano.md) ^6.0.3
- [fuse.js](https://npm.io/package/fuse.js.md) ^6.5.3
- [i18next](https://npm.io/package/i18next.md) ^22.5.1
- [firebase](https://npm.io/package/firebase.md) ^10.8.1
- [react-dnd](https://npm.io/package/react-dnd.md) ^16.0.1
- [react-svg](https://npm.io/package/react-svg.md) ^16.1.32
- [react-icons](https://npm.io/package/react-icons.md) ^5.0.1
- [react-query](https://npm.io/package/react-query.md) ^3.39.3
- [usehooks-ts](https://npm.io/package/usehooks-ts.md) ^2.15.1
- [react-shadow](https://npm.io/package/react-shadow.md) ^20.4.0
- [react-window](https://npm.io/package/react-window.md) ^1.8.10
- [@dnd-kit/core](https://npm.io/package/@dnd-kit/core.md) ^6.3.1
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.15.4
- [framer-motion](https://npm.io/package/framer-motion.md) ^10.18.0
- [react-i18next](https://npm.io/package/react-i18next.md) ^12.3.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.3
- [react-toastify](https://npm.io/package/react-toastify.md) ^10.0.4
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [simplebar-react](https://npm.io/package/simplebar-react.md) ^3.2.4
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.21.3
- [@dnd-kit/sortable](https://npm.io/package/@dnd-kit/sortable.md) ^10.0.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.15.4
- [i18next-http-backend](https://npm.io/package/i18next-http-backend.md) ^2.5.0
- [@rollup/plugin-replace](https://npm.io/package/@rollup/plugin-replace.md) ^5.0.5
- [react-loading-skeleton](https://npm.io/package/react-loading-skeleton.md) ^3.4.0
- [i18next-chained-backend](https://npm.io/package/i18next-chained-backend.md) ^4.6.2
- [bootstrap-daterangepicker](https://npm.io/package/bootstrap-daterangepicker.md) ^3.1.0
- [@minoru/react-dnd-treeview](https://npm.io/package/@minoru/react-dnd-treeview.md) ^3.5.0
- [@r2wc/react-to-web-component](https://npm.io/package/@r2wc/react-to-web-component.md) ^2.0.3
- [react-window-infinite-loader](https://npm.io/package/react-window-infinite-loader.md) ^1.0.9
- [react-bootstrap-daterangepicker](https://npm.io/package/react-bootstrap-daterangepicker.md) ^8.0.0
- [i18next-browser-languagedetector](https://npm.io/package/i18next-browser-languagedetector.md) ^7.2.0

## Recent versions

- 0.16.17 (latest) — 2026-09-28
- 0.16.16-sandbox.saas-9356.patch-2 (sandbox) — 2026-09-23
- 0.16.16-dev.0 (dev) — 2026-08-18
- 0.14.10 (legacy) — 2026-04-17
- 0.16.16-sandbox.saas-9356.patch-1 — 2026-09-22
- 0.16.16 — 2026-09-21
- 0.16.15-sandbox.atechops-2707.patch-4 — 2026-09-18
- 0.16.15-sandbox.atechops-2707.patch-3 — 2026-09-18
- 0.16.15-sandbox.atechops-2707.patch-2 — 2026-09-18
- 0.16.15-sandbox.atechops-2707.patch-1 — 2026-09-17
- 0.16.15-sandbox.saas-9356.patch-1 — 2026-09-09
- 0.16.15 — 2026-06-29
- 0.16.14-sandbox.saas-11181.patch-2 — 2026-06-23
- 0.16.14-sandbox.saas-11181 — 2026-06-23
- 0.16.14 — 2026-05-26
- … 465 more at https://npm.io/package/@ukpc-lib/react/versions

## README

# @ukpc-lib/react

@ukpc-lib is a comprehensive npm library designed to provide a suite of reusable components, themes, colors, hooks, and auth providers for UKPC applications. It aims to streamline development and ensure consistency across different projects.

## Installation

### React

To install package, use the following command:

```bash
npm install @ukpc-lib/react
```

### .NET

With .NET applications, you can import the script and use it as follows:

Topbar:
https://unpkg.com/@ukpc-lib/react@latest/web-components-bundle/global-topbar/index.js

Global Menu:
https://unpkg.com/@ukpc-lib/react@latest/web-components-bundle/global-menu/index.js

## Usage

**To ensure the correct display, you should use the layout as shown below:**

### React

After installation, you can start using components by importing it into your project. Here's an example of how to use Global Menu:

```js
import { GlobalMenu } from '@ukpc-lib/react/components';
import { useAuth } from '@ukpc-lib/react/share';
import { Outlet } from 'react-router-dom';
import TopBar from './TopBar';
import { useTranslation } from '@ukpc-lib/react/share';

export default function PrivateLayout() {
  const { logout } = useAuth();
  const { ready } = useTranslation();
  
  return (
    ready && ( <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div style={{ height: '64px' }}>
        <TopBar />
      </div>
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          flex: 1,
          overflow: 'hidden',
        }}
      >
        <GlobalMenu
          baseUrl="https://saas.dev-intelli-park.com"
          menuPath="/global-menu-config/api/v1/menu-items/user"
          logout={logout}
        />
        <div style={{ flex: 1, padding: '40px', overflow: 'auto' }}>
          <Outlet />
        </div>
      </div>
    </div> )
  );
}
```

### .NET

```js
<div style="display: flex; flex-direction: column; height: 100vh;">
  <div style="height: 64px;">
    <global-topbar
      base-url="@baseurl"
      user="@userJson"
      logo="logoURL"
    ></global-topbar>
  </div>
  <div style="display: flex; flex-direction: row; flex: 1; overflow: hidden;">
    <global-menu
      menu-path="/global-menu-config/api/v1/menu-items/user"
      base-url="@baseurl"
      logout="logout"
    ></global-menu>
    <div style="flex: 1; padding: 40px; overflow: auto;">
      <Outlet />
    </div>
  </div>
</div>
```

## API

#### Global menu:

- `baseUrl`: This is the root path where the global menu resources are located.
- `menuPath`: This is appended to the `baseUrl` to form the full URL to the menu resource.
- `logout()`: A method that logs out the current user. When called, it will clear the user's session and redirect them to the login page.

#### Topbar:

- `baseUrl`: This is the root path where the global topbar resources are located.
- `user`: A JSON string representing the current user.
- `logo`: The URL of the logo image to be displayed on the topbar.

## Details documentation of Components and Shared Authentication Logic Links

- [Components](./docs/components.md)
- [Shared Logic](./docs/share.md)

## Contributing

We always welcome community contributions. If you want to contribute, please create a Pull Request and we will review it.

---
_Source: https://npm.io/package/@ukpc-lib/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._