• Public
  • Public/Protected
  • All

Namespace App

The app structure is based on a logical grouping of components.

Common top level components, a shared store, layouts, and API resources.


Type aliases

AboutProps: React.HTMLProps<HTMLDivElement> & { fixed?: boolean; showAboutLink?: boolean; showInstallButton?: boolean; store: App.Store.types.Store }
AppLinkProps: React.HTMLProps<HTMLAnchorElement> & { ref?: React.Ref<HTMLAnchorElement>; store: App.Store.types.Store }
AppNameProps: React.HTMLProps<HTMLSpanElement>
AppProps: { children?: React.ReactNode }

Type declaration

  • Optional children?: React.ReactNode

    The router can be replaced with the provided children, which can be useful for e.g. testing where the store and/or theme are needed.

AsideProps: React.HTMLProps<HTMLDivElement> & { store: App.Store.types.Store }
ContainerProps: React.HTMLProps<HTMLDivElement> & { store: App.Store.types.Store }
DetailsProps: React.HTMLProps<HTMLDetailsElement>
HeaderProps: Parameters<typeof UI.Header>[0] & { store: App.Store.types.Store }
InstallProps: React.HTMLProps<HTMLDivElement>
InstructionsProps: React.HTMLProps<HTMLUListElement>
LogoProps: React.HTMLProps<HTMLSpanElement>
PrivacyPolicyProps: React.HTMLProps<HTMLDivElement>
TermsOfServiceProps: React.HTMLProps<HTMLDivElement>
VersionUpdateFooterProps: React.HTMLProps<HTMLDivElement> & { store: App.Store.types.Store }


About: StyledComponent<(__namedParameters: AboutProps) => Element, DefaultTheme, {}, never> = ...

A few links containing information about the app.

The "Privacy Policy" and "Terms of Service" are necessary for the app to be accepted to app stores.

AppLink: StyledComponent<(__namedParameters: AppLinkProps) => Element, DefaultTheme, {}, never> = ...

A link to the root of the application.

AppName: StyledComponent<(props: AppNameProps) => Element, DefaultTheme, {}, never> = ...

The name of the application shown at the top left.

You will probably want to customize this.

Aside: StyledComponent<(__namedParameters: AsideProps) => Element, DefaultTheme, {}, never> = ...

Menu icons at the top right.

Container: StyledComponent<(__namedParameters: ContainerProps) => Element, DefaultTheme, {}, never> = ...

The main generic element containing the application.

Details: StyledComponent<(__namedParameters: DetailsProps) => Element, DefaultTheme, {}, never> = ...

Toggles the PWA installation instructions.

GlobalStyle: GlobalStyleComponent<{}, DefaultTheme> = ...
Header: StyledComponent<(__namedParameters: App.HeaderProps) => Element, DefaultTheme, {}, never> = ...

The fixed header at the top of the application.

Install: StyledComponent<(props: InstallProps) => Element, DefaultTheme, {}, never> = ...

Describes various app installation methods.

Instructions: StyledComponent<(props: InstructionsProps) => Element, DefaultTheme, {}, never> = ...

How to install the progressive web app (PWA).

Logo: StyledComponent<(__namedParameters: LogoProps) => Element, DefaultTheme, {}, never> = ...

The application logo.

You will probably want to customize this.

PrivacyPolicy: StyledComponent<(props: PrivacyPolicyProps) => Element, DefaultTheme, {}, never> = ...

A very generic Privacy Policy.

This is only an example placeholder, not legal advice.

You will probably need to replace this with your own.

TermsOfService: StyledComponent<(props: TermsOfServiceProps) => Element, DefaultTheme, {}, never> = ...

A very generic Terms of Service.

This is only an example placeholder, not legal advice.

You will probably need to replace this with your own.

VersionUpdateFooter: StyledComponent<(__namedParameters: VersionUpdateFooterProps) => null | Element, DefaultTheme, {}, never> = ...

A footer with a button to update the app which will be shown whenever there is a version update.

Shown when a service worker update is ready or when the version.json static file has changed.

appStoreBadges: { href: string; imgAlt: string; imgSrc: string }[] = []

An array of objects describing each app store badge.


  • App(__namedParameters: AppProps): ReactElement<any, string | JSXElementConstructor<any>>
  • The root of the application, beginning with the store, theme, then routes.


    Returns ReactElement<any, string | JSXElementConstructor<any>>

Generated using TypeDoc