ErrorPage

As a developer, handling 404 errors means creating a page that the server uses as a replacement when it can't find the requested page.

Author

• @author Henry Dyson J [email protected]

Link

Story Book Link ErrorPage

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_error-page

Import component

import { ErrorPage } from '@licuido-ui/ui_error-page';

Usage

<ErrorPage pageNotFoundText={'Page Not Found'} />

Image

Sample Code

<ErrorPage
  urlImgHeight={300}
  urlImgWidth={300}
  pageNotFoundText={'Page Not Found'}
  goBackButton={{ label: 'Back', style: { color: '#ffff' } }}
  pageNotFoundIconUrl='https://img.freepik.com/free-vector/internet-network-warning-404-error-page-file-found-web-page-internet-error-page-issue-found-network-404-error-present-by-man-sleep-display_1150-55450.jpg'
/>

Props

| Name | Description | Default | Control | | ----------------------------- | ---------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------- | | pageNotFoundIconUrl | string | "" | https://cdni.iconscout.com/illustration/premium/thumb/error-404-page-3100465-2582986.png | | pageNotFoundIconComponent | ReactNode | - | - | | goBackButton | object{ label: string; onClick: () => void; } | object | {} | | pageNotFoundText | string | Page not found !!! | Page not found !!! | | urlImgHeight | number | - | | urlImgWidth | number | - | | urlImgStyle | SxProps | { } | urlImgStyle : {} | | ButtonBlockStyle | SxProps<{}> | { } | ButtonBlockStyle : {} | | messageTextStyle | SxProps<{}> | { } | {} | | rootStyle | SxProps<{}> | { } | rootStyle : {} | | iconBlockStyle | SxProps<{}> | { } | iconBlockStyle : {} | | className | string | "" | Set string | | id | string | string | string | | sx | SxProps<Theme> | { } | Set object |