yangsuite-ui-utils
v1.0.23
Published
## Usage
Downloads
306
Readme
Package that contains reusable components used in yangsuite plugins such as Header or Footer.
Usage
- Add package reducers to your
store.js
.
import { reducers } from "yangsuite-ui-utils";
import { combineReducers } from "redux";
const rootReducer = combineReducers({
...reducers,
pluginsSlice1: pluginsSlice1,
pluginsSlice2: pluginsSlice2,
});
export default configureStore({
reducer: rootReducer,
});
- Import for example
Layout
componenet and use is in your react router configuration.
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Layout } from "yangsuite-ui-utils";
const router = createBrowserRouter([
{
path: "/ysexample",
element: <Layout />,
children: [
{
path: "",
element: <div>My component</div>,
},
],
},
]);
createRoot(document.getElementById("app")).render(
<Provider store={store}>
<RouterProvider router={router}></RouterProvider>
</Provider>,
);
Refer to exported packages to see all components and functions you can use
Components
Loader
import { Loader } from "yangsuite-ui-utils";
function myComponent() {
return <Loader msg="Fetching devices" />;
}
Simple spinning loader.
Props:
msg
: Message to display while loading data
Layout
import { Layout } from "yangsuite-ui-utils";
Use it as root component to wrap your app with Header
and Navbar
useCustomNaviage
import useCustomNavigate from "./navigation";
function myComponent() {
const navigate = useCustomNavigate();
return <btn onClick={(e) => navigate('link')}></btn>;
}
Hook used to navigate beetween diffrent apps. It will automaticlly decide if redirection should be only within given plugin or beyond it.
Redux layout
Store
{
visible: false, // Tells if sidebar is visible or not
menu: [], // All sidebar menus
plugins: {}, // All plugins implemented by plugins
currentPlugin: "yangsuite" // Current plugin that we are at. Used for routing.
};
Actions
{
toggleNav, // Toggle navbar
showNav, // Show navbar
closeNav, // Close navbar
useCustomNavigate, // Hook to navigate beetween pages
}
Development
Install node modules and build bundle
> npm i
> npm run build-dev
Create global symlink
> npm link
Use create link within your plugin
> npm link yangsuite-ui-utils
> npm i