@transact-open-ux/react/dist/components/Page.d.ts

Library to integrate React with Transact Open UX

import React, { FunctionComponent } from "react";
export interface PageProps {
    /**
     * The content of the Page.
     */
    children?: React.ReactNode | React.ReactNodeArray;
    /**
     * This id prop is provided for server side Transact Applicant Framework support
     */
    id?: string;
    /**
     * The label gets pushed into a meta data object accessible via the getCurrentPageMeta method within the `PageConsumer` component
     */
    label?: React.ReactNode;
    /**
     * This component will be rendering using React.Suspense when the page is dynamically being loaded via React.lazy
     * This property is required when using dynamically loaded pages
     */
    loadingComponent?: NonNullable<React.ReactNode> | null;
    /**
     * The offMenu prop prevents the page from being added to the navPages array within the `PageConsumer`.
     * Useful for pages that are not part of the navigation menus
     */
    offMenu?: boolean;
}
/**
 * This component provides page level configuration for the Transact Application Framework via the `id` prop.
 * <br>
 * It also adds meta data for each page via the `label` and `offMenu` props.
 * <br>
 * You can dynamically load pages using the [React.lazy](https://reactjs.org/docs/react-api.html#reactlazy) method
 * <br>
 * You can also provide a fallback component for whilst it is loading via the fallback prop, this uses [React.Suspense](https://reactjs.org/docs/react-api.html#reactsuspense) under the hood
 *
 * ## Example
 * This example has "two" Pages lazy loaded via React.lazy and "one" offMenu page for the confirmation page.
 *
 * This means that the "SubmitSuccess" Page will NOT be a member of the `navPages` array in the PageConsumer.
 * ```jsx
 * import React from 'react';
 * import { Page, PageController } from '@transact-open-ux/react';
 *
 * const Page1 = React.lazy(() => import('../Page1'));
 * const Page2 = React.lazy(() => import('../Page2'));
 *
 * export const Pages = () => (
 *  <PageController>
 *    <Page id="Page1" loadingComponent={<div>loading...</div>} >
 *      <Page1 />
 *    </Page>
 *    <Page id="Page2" loadingComponent={<div>loading...</div>}>
 *      <Page2 />
 *    </Page>
 *    <Page id="SubmitSuccess" offMenu>
 *      You have successfully submitted your application
 *    </Page>
 *  </PageController>
 * );
 * ```
 */
export declare const Page: FunctionComponent<PageProps>;