@ukpc-lib/react v0.3.18
@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:
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:
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
<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 thebaseUrl
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
Contributing
We always welcome community contributions. If you want to contribute, please create a Pull Request and we will review it.
3 days ago
4 days ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
7 days ago
7 days ago
6 days ago
6 days ago
6 days ago
9 days ago
9 days ago
9 days ago
9 days ago
11 days ago
11 days ago
18 days ago
18 days ago
18 days ago
18 days ago
19 days ago
21 days ago
25 days ago
25 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago