react-global-state-router

Installation

1$ yarn add @ethicdevs/react-global-state-router
2# or
3$ npm i @ethicdevs/react-global-state-router

---

See this CodeSandBox for a live editable demo. Or just run cd example && yarn && yarn start if you have cloned the repo already.

---

Usage

Add the GlobalStateRouterProvider just under your GlobalStateProvider so that router/routes/links can use its context.

note: If you do not have a GlobalStateProvider already, please head over to the @ethicdevs/react-global-state-hooks repository and follow the README's instructions first. This library builds upon it.

1// src/App.tsx
2import React from "react";
3import { GlobalStateProvider } from "@ethicdevs/react-global-state-hooks";
4+ import { GlobalStateRouterProvider } from "@ethicdevs/react-global-state-router";
5
6import { initialState, rootReducer } from "./state";
7
8const App = () => <>{/* Your app */}</>;
9
10const AppWithProviders = () => (
11  <GlobalStateProvider initialState={initialState} rootReducer={rootReducer}>
12+    <GlobalStateRouterProvider>
13      <App />
14+    </GlobalStateRouterProvider>
15  </GlobalStateProvider>
16);
17
18export default AppWithProviders;

Update your globalState.ts/js or state/index.ts/js file to include the router's exported from this library (so that it can use your store to manage the routing state, giving you full control over routing in your app! 👌) =>

1// src/state/index.ts
2import { combineModules } from "@ethicdevs/react-global-state-hooks";
3+ import { GlobalStateRouterStateModule } from "@ethicdevs/react-global-state-router"
4
5import { AuthModule } from "./auth";
6import { HelloModule } from "./hello";
7
8// Auto export everything needed for the Provider
9export const { ActionTypes, rootReducer, initialState } = combineModules({
10+  ...GlobalStateRouterStateModule,
11  auth: AuthModule,
12  hello: HelloModule,
13});

You are now ready to add your first router and your first routes! Let's see how to simply do that:

1// src/App.tsx
2import React, { VFC } from "react";
3
4import { GlobalStateProvider } from "@ethicdevs/react-global-state-hooks";
5+ import { GlobalStateRouterProvider, Link, Router, Route } from "@ethicdevs/react-global-state-router";
6
7// ... striped for brevity ...
8
9// Add some screens to showcase the features of Link, mainly
10
11+ const OnboardingScreen: VFC = () => {
12+   return (
13+     <div>
14+       <h1>Hey, welcome!</h1>
15+       <h2>react-global-state-router is a tiny router for the braves!</h2>
16+      <Link screen={"JoinScreen"}>Get started!</Link>
17+    </div>
18+  );
19+};
20
21+const JoinScreen: VFC = () => {
22+  return (
23+    <div>
24+      <h1>Join the move</h1>
25+      <h2>Register an account, or login using your existing account.</h2>
26+      <Link goBack>Back (pop)</Link>
27+      <Link
28+        screen={"LoginScreen"}
29+        args={{
30+          referralUid: "blabbla-uuid",
31+        }}
32+      >
33+        Login
34+      </Link>
35+      <Link screen={"RegisterScreen"}>Register an account</Link>
36+    </div>
37+  );
38+};
39
40+const RegisterScreen: VFC = () => {
41+  return (
42+    <div>
43+      <h1>Register</h1>
44+      <Link screen={"OnboardingScreen"} replace>
45+        Back to Onboarding
46+      </Link>
47+    </div>
48+  );
49+};
50
51+ const LoginScreen: VFC = () => {
52+   return (
53+     <div>
54+       <h1>Login</h1>
55+       <Link screen={"OnboardingScreen"} replace>
56+         Back to Onboarding
57+       </Link>
58+     </div>
59+   );
60+ };
61
62// Add the router and the routes :)
63
64function App() {
65+  return (
66+    <Router initialScreen={"OnboardingScreen"}>
67+      <Route screen={"OnboardingScreen"} component={<OnboardingScreen />} />
68+      <Route screen={"JoinScreen"} component={<JoinScreen />} />
69+      <Route screen={"LoginScreen"} component={<LoginScreen />} />
70+      <Route screen={"RegisterScreen"} component={<RegisterScreen />} />
71+    </Router>
72  );
73}
74

License

MIT