Initialized very simple global state with a very simple example of usage

package.json

@@ -18,6 +18,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
+    "reactn": "^2.2.6",
     "styled-components": "^5.0.1"
   },
   "devDependencies": {

src/components/app/index.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+/* eslint react/jsx-one-expression-per-line: 0 */
+import React, { useGlobal } from "reactn";
 import styled, { AnyStyledComponent } from "styled-components";
 import "./normalize.css"; // Normalize CSS styles across all browsers
 
@@ -41,6 +42,8 @@ const Column: AnyStyledComponent = styled.div`
 `;
 
 const TutorialApp: React.FC = (): JSX.Element => {
+  const [step, setStep] = useGlobal("step");
+
   return (
     <StyledTutorialPage>
       <Navbar />
@@ -53,6 +56,12 @@ const TutorialApp: React.FC = (): JSX.Element => {
         </Column>
         <Column>
           <h3 className="text-center">Output will go here</h3>
+          <button
+            type="button"
+            onClick={(): Promise<{ step: number }> => setStep(step + 1)}
+          >
+            {step}: Click to increase
+          </button>
         </Column>
       </MainWrapper>
     </StyledTutorialPage>

src/global.d.ts

@@ -0,0 +1,9 @@
+import "reactn";
+
+// This sets the shape of our global state since we want our global
+// state to be typed.
+declare module "reactn/default" {
+  export interface State {
+    step: number;
+  }
+}

src/pages/index.tsx

@@ -1,7 +1,11 @@
-import React from "react";
+import React, { setGlobal } from "reactn";
 
 import { TutorialApp } from "../components/app";
 
+setGlobal({
+  step: 1
+});
+
 const IndexPage = (): JSX.Element => <TutorialApp />;
 
 export default IndexPage;