UIDB

Get in Touch

It is manager for your pages like mobile app.

You can use it with any cross-platform framework. we trid it on React, on React with Cordova or on React with Electron, work good.

Simple Demo

Try simple example code

import Navigator from "undefined";

For example: In the render function return

<Navigator onRef={(ref) => (navigatorRef = ref)} onError={(error) => {}}>
  <MyHomePage key="home" levelPage={0} />

  <AboutPage
    key="about"
    levelPage={1}
    transitionIn="fadeInRight"
    transitionOut="fadeOutLeft"
  />
</Navigator>;

Note

levelPage
important to manage the returs (from back button) in the structure of a tree

To change page you get the ref and do:

navigatorRef.changePage("about");

navigatorRef.changePage("about");

navigatorRef.changePage(
  goToPage, //Required
  { options } // Not requred
);

const options = {
  transitionIn: "fadeInRight", // have defult
  transitionOut: "fadeOutLeft", // have defult
  timeAnimationInMS: integer, // defult=250(ms)
  callbackFun: () => {},
  props: {},
};

*animationIn and animationOut need name animate from animate.style
*the animate.css includ in this package

use with react-router

import React from "react";
import Navigator from "undefined";

//import all pages
import Home from "../pages/index";
import Page2 from "../pages/page2";

// #Hooks
import { BrowserRouter, HashRouter, Route,Routes, useParams } from "react-router-dom";
import { createBrowserHistory } from "history";

// ## use history
const history = createBrowserHistory();

const useRouter = (props) => {
  let Router = BrowserRouter;
  if (window.cordova.platformId !== "browser") Router = HashRouter;

  return (
 <Router history={history}>
    <Routes>
      {[
        "/:key",
        "/",
        "*",
      ].map((path, index) => (
        <Route
          key={index}
          path={path}
          element={<UseNavigator {...props} />}
        ></Route>
      ))}
    </Routes>
 </Router>
  );
};

const UseNavigator = (props) => {
  // # init navigator ref
  let navigatorRef = undefined;

  const { key } = useParams();
  // let query = useQuery();
  return (
    <div>
      <Navigator routeKey={key} changeRoute={false}>
        <Home key="home" levelPage={0} />
        <Page2 key="page2" levelPage={1} />
      </Navigator>
    </div>
  );
};

export default useRouter;

import React from "react";
import Navigator from "undefined";

//import all pages
import Home from "../pages/index";
import Page2 from "../pages/page2";

// #Hooks
import { BrowserRouter, HashRouter, Route, useParams } from "react-router-dom";
import { createBrowserHistory } from "history";

// ## use history
const history = createBrowserHistory();

const useRouter = (props) => {
  let Router = BrowserRouter;
  if (window.cordova.platformId !== "browser") Router = HashRouter;

  return (
    <Router history={history}>
      <Route path={["/:key", "/"]}>
        <UseNavigator {...props} />
      </Route>
    </Router>
  );
};

const UseNavigator = (props) => {
  // # init navigator ref
  let navigatorRef = undefined;

  const { key } = useParams();
  // let query = useQuery();
  return (
    <div>
      <Navigator routeKey={key} changeRoute={false}>
        <Home key="home" levelPage={0} />
        <Page2 key="page2" levelPage={1} />
      </Navigator>
    </div>
  );
};

export default useRouter;

Check what is page now

const nowPage = navigatorRef.nowPage;

Get the historyPages list

const historyPages = navigatorRef.historyPages();

Get the listLevelPages list

const listLevelPages = navigatorRef.listLevelPages();

Back 1 page history

navigatorRef.back();

navigatorRef.back({options...});

options => { animationIn:integer // have defult , animationOut:string // have defult , timeAnimationInMS:integer // defult=250(ms) , callbackFun:function , props:{...} }

Check if the mangerPages is busy

const navigator_busy = navigatorRef.busy;

*busy return boolean

Navigation Controller

It is manager for your pages like mobile app.

Simple Demo

navigatorRef.changePage("about");

use with react-router

Options

<Navigator props={}>

<Child props={}>

Get in Touch

Fun with us! Join our newsletter

Navigation Controller

It is manager for your pages like mobile app.

Simple Demo

navigatorRef.changePage("about");

use with react-router

use react-router-dom @version < 6.x.x

Install

Options

<Navigator props={}>

key

onRef

errorPageKey

onError

beforExit (android only)

beforBack (android only)

height

onChangePage

beforChangePage

changeRoute

homePageKey

<Child props={}>

levelPage

backgroundColor

height

backOnSwipeRight

transitionIn

transitionOut

animationTimeInMS

props

kill

alwaysLive

Get in Touch

Fun with us! Join our newsletter