Overriding 1fe Shell Components

The shell has two visual components that can be overridden if custom components are needed. Otherwise, the default components will be used.

getLoader

OneFEShellOptions.components.getLoader

Note

The loader component is rendered when the shell is loading a widget.

Here is a simple example of how to override the loader component with a custom component.

import renderOneFEShell from '@devhub/1fe-shell';
import { Spin } from 'antd';

renderOneFEShell({
  components: {
    getLoader: () => <Spin />,
  }
});

getError

OneFEShellOptions.components.getError

Note

The error component is shown when:

• The shell fails to load a widget
• There is no plugin associated with the route
• The 1fe error boundary is hit

Types

type OneFEErrorComponentProps = {
  type?: 'error' | 'notFound';
  plugin?: PluginConfig;
  message?: string;
};

Here is a simple example of how to override the error component.

import renderOneFEShell from '@devhub/1fe-shell';
import { Spin } from 'antd';

renderOneFEShell({
  components: {
    getError: ({ type, plugin, message }: OneFEErrorComponentProps) => (
      <>
        <h1>Custom Error Page</h1>
        <p>{type === 'notFound' ? 'Looks like this page is not here' : 'An error has occurred'}</p>
        <p>{plugin}</p>
        <p>{message}</p>
      </>
    ),
  }
});