0.4.13 • Published 4 years ago
@scripty/react-navigations v0.4.13
@scripty/react-navigations
Description
lightweight react navigation components.
Usage
npm install -s @scripty/react-navigations
The navigation components are powered by Antd-Design-Icons: https://ant.design/components/icon/
Just add the name of the desired icon as a string property (see example).
#####if you want a leightweighter version, use "Flyout"-Component instead of "FlyoutWithIcons"-Component.
Client: Example.jsx
import React, { useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { FlyoutWithIcons } from '@scripty/react-navigations/lib/FlyoutWithIcons';
import { Breadcrumbs } from '@scripty/react-navigations/lib/Breadcrumbs';
import { FlyoutUser } from '@scripty/react-navigations/lib/FlyoutUser';
import { FlyoutUserWithIcons } from '@scripty/react-navigations/lib/FlyoutUserWithIcons';
export const Example = () => {
const [ selectedKeys, setSelectedKeys ] = useState([])
const onClick = (key, selectedKeys) => {
setSelectedKeys(selectedKeys);
}
const routes = [
{
"key" : "Dashboard",
"label" : "Dashboard",
"icon" : "DashboardOutlined",
"path" : "/",
"exact" : true
},
{
"key" : "Example",
"label" : "Example",
"icon" : "BankOutlined",
"path" : "/example",
"submenu" : [
{
"key" : "Sub-1",
"label" : "Sub 1",
"path" : "/sub1",
"icon" : "CloudServerOutlined",
"submenu" : [
{
"key" : "Sub-1-1",
"label" : "Sub-1-1",
"path" : "/sub-1-1",
"icon" : "CreditCardFilled",
}
]
},
{
"key" : "Sub-2",
"label" : "Sub-2",
"path" : "/sub-2",
"icon" : "InsuranceOutlined",
"submenu" : [
{
"key" : "Sub-2-1",
"label" : "Sub-2-1",
"path" : "/sub-2-1",
"icon" : "ProfileTwoTone",
}
]
},
{
"key" : "Sub-3",
"label" : "Sub-3",
"path" : "/sub-3",
"icon" : "ShakeOutlined",
},
{
"key" : "Sub-4",
"label" : "Sub-4",
"path" : "/sub-4",
"icon" : "SnippetsTwoTone",
"submenu" : [
{
"key" : "Sub-4-1",
"label" : "Sub-4-1",
"path" : "/sub-4-1",
"icon" : "ThunderboltFilled",
},
{
"key" : "Sub-4-2",
"label" : "Sub-4-2",
"path" : "/sub-4-2",
"icon" : "VerticalLeftOutlined",
}
]
}
]
}
];
const userMenuRoutes = [
{
"key" : "UserMenu",
"label" : "Login",
"path" : "/login",
"exact" : true,
"submenu" : [
{
"key" : "Profile",
"label" : "Profile",
"path" : "/profile",
"icon" : "UserOutlined",
},
{
"key" : "Settings",
"label" : "Settings",
"path" : "/settings",
"icon" : "SettingOutlined",
}
]
}
];
const loggedInUser = {
username: 'Danijel',
loggedIn: true,
avatar: {
url: 'https://s.gravatar.com/avatar/d363403799aa4b4de34c36bc290ebe12?size=50&default=retro'
}
};
const loggedOutUser = {
loggedIn: false,
};
return (
<Router>
<h2>Breadcrumbs</h2>
<Breadcrumbs onClick={onClick} routes={[ ...routes, ...userMenuRoutes ]} selectedKeys={selectedKeys} />
<h2>Flyout</h2>
<FlyoutWithIcons onClick={onClick} routes={routes} selectedKeys={selectedKeys} />
<h2>Flyout logged in user</h2>
<FlyoutUser loginPath={'/login'} user={loggedInUser} onClick={onClick} routes={userMenuRoutes} selectedKeys={selectedKeys} />
<h2>Flyout logged in user with icons</h2>
<FlyoutUserWithIcons user={loggedInUser} onClick={onClick} routes={userMenuRoutes} selectedKeys={selectedKeys} />
<h2>Flyout logged out user</h2>
<FlyoutUser loginPath={'/login'} user={loggedOutUser} onClick={onClick} routes={userMenuRoutes} selectedKeys={selectedKeys} />
</Router>
);
};
Components
Name | Description |
---|---|
Flyout | 3 Level Flyout Navigation |
FlyoutWithIcons | 3 Level Flyout Navigation with Antd-Icons library |
Breadcrumbs | Breadcrumbs based on given routes |
Flyout / WithIcons Properties
Property | Type | Default |
---|---|---|
onClick | Function | |
routes | Array | |
selectedKeys | Array |
Route Properties
Property | Type | Description |
---|---|---|
key | String | unique id key (required) |
label | String | (required) |
path | String | (required) |
icon | String | (optional) |
Breadcrumbs Properties
Property | Type | Default |
---|---|---|
onClick | Function | |
routes | Array | |
selectedKeys | Array |
FlyoutUser / WithIcons Properties
Property | Type | Default |
---|---|---|
onClick | Function | |
routes | Array | |
selectedKeys | Array | |
user | Object | {loggedIn: false} |
loginPath | String | /login |
0.4.13
4 years ago
0.4.12
4 years ago
0.4.11
4 years ago
0.4.10
4 years ago
0.4.9
4 years ago
0.4.8
4 years ago
0.4.5
4 years ago
0.4.7
4 years ago
0.4.6
4 years ago
0.4.4
4 years ago
0.4.3
4 years ago
0.4.2
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.7
4 years ago
0.2.6
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.5
4 years ago
0.2.4
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago