Expose new LoadingPageComponentType and ErrorPageComponentType types

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { LoadingPageComponentType } from 'react-router-guards';
 import { Pokeball } from 'svgs';
 import styles from './loading.module.scss';
 
-const Loading = () => (
+const Loading: LoadingPageComponentType = () => (
   <div className={styles.container}>
     <div className={styles.icon}>
       <Pokeball isAnimated />

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

@@ -1,12 +1,15 @@
 import React from 'react';
+import { ErrorPageComponentType } from 'react-router-guards';
 import { Link } from 'components';
 import styles from './notFound.module.scss';
 
-const NotFound = () => (
+const NotFound: ErrorPageComponentType = ({ error }) => (
   <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;

docs/guard-provider.md

@@ -14,8 +14,8 @@ The `GuardProvider` provides an API for declaring global guards and loading and
 interface GuardProviderProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
-  loading?: PageComponent;
-  error?: PageComponent;
+  loading?: LoadingPageComponent;
+  error?: ErrorPageComponent;
 }
 ```
 

docs/guarded-route.md

@@ -14,8 +14,8 @@ The `GuardedRoute`, on top of accepting the same props as a regular [`Route`](ht
 interface GuardedRouteProps extends RouteProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
-  loading?: PageComponent;
-  error?: PageComponent;
+  loading?: LoadingPageComponent;
+  error?: ErrorPageComponent;
   meta?: Record<string, any>;
 }
 ```

docs/page-components.md

@@ -9,10 +9,6 @@ Page components are used for setting loading and error pages.
 
 ## API
 
-```ts
-type PageComponent = React.Component | string | boolean | number | null | undefined;
-```
-
 ## Loading page
 
 Loading pages are React components that are displayed while guard middleware is resolving.
@@ -45,25 +41,35 @@ _**Note:** If using a React component for your error page, it can receive the er
 
 With strings:
 
-```jsx
-<GuardProvider loading="Loading..." error="Not found." />
+```tsx
+import { GuardProvider } from 'react-router-guards';
+
+<GuardProvider loading="Loading..." error="Not found." />;
 ```
 
 With React components:
 
-```jsx
-const NotFound = ({ error }) => (
+```tsx
+import {
+  ErrorPageComponentType,
+  GuardProvider,
+  LoadingPageComponentType,
+} from 'react-router-guards';
+
+const NotFound: ErrorPageComponentType = ({ error }) => (
   <div>
     <h1>Not found.</h1>
-    <p>{error}</p>
+    {error && <p>{error}</p>}
   </div>
 );
 
-const Loading = () => (
+const Loading: LoadingPageComponentType = () => (
   <div>
     <div id="loader" />
   </div>
 );
 
+// ...
+
 <GuardProvider loading={Loading} error={NotFound} />;
 ```

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, LoadingPageComponent, ErrorPageComponent } from './types';
 
 const GuardedRoute: React.FunctionComponent<GuardedRouteProps> = ({
   children,
@@ -30,8 +30,8 @@ const GuardedRoute: React.FunctionComponent<GuardedRouteProps> = ({
       {...routeProps}
       render={() => (
         <GuardContext.Provider value={routeGuards}>
-          <ContextWrapper<PageComponent> context={LoadingPageContext} value={loading}>
-            <ContextWrapper<PageComponent> context={ErrorPageContext} value={error}>
+          <ContextWrapper<LoadingPageComponent> context={LoadingPageContext} value={loading}>
+            <ContextWrapper<ErrorPageComponent> context={ErrorPageContext} value={error}>
               <Guard name={path} component={component} meta={meta} render={render}>
                 {children}
               </Guard>

package/src/contexts.ts

@@ -1,11 +1,11 @@
 import { createContext } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { PageComponent, GuardFunction } from './types';
+import { GuardFunction, ErrorPageComponent, LoadingPageComponent } from './types';
 
-export const ErrorPageContext = createContext<PageComponent>(null);
+export const ErrorPageContext = createContext<ErrorPageComponent>(null);
 
 export const FromRouteContext = createContext<RouteComponentProps | null>(null);
 
 export const GuardContext = createContext<GuardFunction[] | null>(null);
 
-export const LoadingPageContext = createContext<PageComponent>(null);
+export const LoadingPageContext = createContext<LoadingPageComponent>(null);

package/src/index.ts

@@ -6,5 +6,8 @@ export {
   GuardFunction,
   GuardProviderProps,
   Next,
+  RouteError,
   PageComponent,
+  LoadingPageComponentType,
+  ErrorPageComponentType,
 } 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

@@ -57,19 +57,34 @@ export type GuardFunction = (
   next: Next,
 ) => void;
 
+export type RouteError = string | null;
+
 /**
  * Page Component Types
  */
-export type PageComponent = ComponentType | null | undefined | string | boolean | number;
+export type PageComponentType<P = {}> = ComponentType<RouteComponentProps & P>;
+export type PageComponent<P = {}> =
+  | PageComponentType<P>
+  | null
+  | undefined
+  | string
+  | boolean
+  | number;
+
+export type LoadingPageComponent = PageComponent;
+export type ErrorPageComponent = PageComponent<{ error: RouteError }>;
+
+export type LoadingPageComponentType = PageComponentType;
+export type ErrorPageComponentType = PageComponentType<{ error: RouteError }>;
 
 /**
  * Props
  */
 export interface BaseGuardProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
-  loading?: PageComponent;
-  error?: PageComponent;
+  loading?: LoadingPageComponent;
+  error?: ErrorPageComponent;
 }
 
 export type PropsWithMeta<T> = T & {