Expose new LoadingPageComponentType and ErrorPageComponentType types

demos/intermediate/src/containers/NotFound/index.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
+import { RouteError } from 'react-router-guards';
 import { Link } from 'components';
 import styles from './notFound.module.scss';
 
-const NotFound = () => (
+interface NotFoundProps {
+  error: RouteError;
+}
+
+const NotFound = ({ error }: NotFoundProps) => (
   <div className={styles.container}>
     <img className={styles.image} src={`/img/missingno.png`} alt="Not found" />
     <h1 className={styles.title}>Uh-oh!</h1>
     <p className={styles.body}>We couldn't catch that Pokémon.</p>
+    {error && <small className={styles.error}>{error}</small>}
+
     <Link to="/">View 'em all</Link>
   </div>
 );

demos/intermediate/src/containers/NotFound/notFound.module.scss

@@ -22,8 +22,10 @@
   margin-bottom: $spacing--base;
 }
 
-.body {
+.error {
   margin-bottom: $spacing--lg;
+  margin-top: $spacing--base;
+  opacity: 0.5;
 
   @include mq($bp--mobile) {
     margin-bottom: $spacing--xl;

package.json

@@ -47,10 +47,6 @@
     "*.{js,ts,tsx}": [
       "eslint --fix",
       "git add"
-    ],
-    "*.scss": [
-      "stylelint",
-      "git add"
     ]
   },
   "husky": {

package/src/Guard.tsx

@@ -13,10 +13,10 @@ import {
   NextAction,
   NextPropsPayload,
   NextRedirectPayload,
+  RouteError,
 } from './types';
 
 type PageProps = NextPropsPayload;
-type RouteError = string | Record<string, any> | null;
 type RouteRedirect = NextRedirectPayload | null;
 
 interface GuardsResolve {

package/src/GuardedRoute.tsx

@@ -5,7 +5,7 @@ import ContextWrapper from './ContextWrapper';
 import Guard from './Guard';
 import { ErrorPageContext, GuardContext, LoadingPageContext } from './contexts';
 import { useGlobalGuards } from './hooks';
-import { GuardedRouteProps, PageComponent } from './types';
+import { GuardedRouteProps, PageComponent, RouteError } from './types';
 
 const GuardedRoute: React.FunctionComponent<GuardedRouteProps> = ({
   children,
@@ -31,7 +31,9 @@ const GuardedRoute: React.FunctionComponent<GuardedRouteProps> = ({
       render={() => (
         <GuardContext.Provider value={routeGuards}>
           <ContextWrapper<PageComponent> context={LoadingPageContext} value={loading}>
-            <ContextWrapper<PageComponent> context={ErrorPageContext} value={error}>
+            <ContextWrapper<PageComponent<{ error: RouteError }>>
+              context={ErrorPageContext}
+              value={error}>
               <Guard name={path} component={component} meta={meta} render={render}>
                 {children}
               </Guard>

package/src/contexts.ts

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { PageComponent, GuardFunction } from './types';
+import { PageComponent, GuardFunction, RouteError } from './types';
 
-export const ErrorPageContext = createContext<PageComponent>(null);
+export const ErrorPageContext = createContext<PageComponent<{ error: RouteError }>>(null);
 
 export const FromRouteContext = createContext<RouteComponentProps | null>(null);
 

package/src/index.ts

@@ -7,4 +7,5 @@ export {
   GuardProviderProps,
   Next,
   PageComponent,
+  RouteError,
 } from './types';

package/src/renderPage.tsx

@@ -11,7 +11,7 @@ type BaseProps = Record<string, any>;
  * @returns the page component
  */
 function renderPage<Props extends BaseProps>(
-  page: PageComponent,
+  page: PageComponent<any>,
   props?: Props,
 ): React.ReactElement | null {
   if (!page) {

package/src/types.ts

@@ -56,11 +56,12 @@ export type GuardFunction = (
   from: GuardFunctionRouteProps | null,
   next: Next,
 ) => void;
+export type RouteError = string | null;
 
 /**
  * Page Component Types
  */
-export type PageComponent = ComponentType | null | undefined | string | boolean | number;
+export type PageComponent<P = {}> = ComponentType<P> | null | undefined | string | boolean | number;
 
 /**
  * Props
@@ -69,7 +70,7 @@ export interface BaseGuardProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
   loading?: PageComponent;
-  error?: PageComponent;
+  error?: PageComponent<{ error: RouteError }>;
 }
 
 export type PropsWithMeta<T> = T & {