React 404 error page Documentation

React 404 Error Page is a stylish and animated 404 error page component for React applications. It features a typewriter effect, countdown timer, and a retro terminal look to provide users with an engaging experience when they encounter a non-existent route.

Key Features

• Typewriter Effect: Terminal-style text that types out with a blinking cursor
• Countdown Timer: Automatically redirects users to the home page after 10 seconds
• Go Back Button: Allows users to navigate to the previous page
• Random Error Messages: Displays humorous messages from a predefined collection
• Responsive Design: Works seamlessly on all screen sizes
• Retro Terminal Look: Styled like an old-school computer terminal
• Easy Integration: Simple to add to any React Router setup

Requirements

This package requires:

• React 19.0.0 or higher
• react-router-dom 7.0.0 or higher

Installation

You can install the package using npm, yarn, or pnpm:

Using npm

npm install react-404-error-page

Using yarn

yarn add react-404-error-page

Using pnpm

pnpm add react-404-error-page

Usage

The most common way to use the Error404 component is to include it in your React Router setup as a catch-all route:

import { Error404 } from 'react-404-error-page';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      {/* Use the Error404 component for any undefined routes */}
      <Route path="*" element={<Error404 />} />
    </Routes>
  );
}

export default App;

This setup ensures that any route not explicitly defined in your Routes will display the Error404 component.

Component API

The Error404 component is designed to work out of the box with minimal configuration. Currently, it doesn't accept any props, as it's designed to be a drop-in solution.

Customization

While the component doesn't currently accept customization props, you can modify its appearance by overriding the CSS classes. The component uses CSS modules, but you can target the main elements with more specific selectors in your global CSS.

CSS Classes

The main CSS classes used by the component are:

• .errorPage: The container for the entire 404 page
• .heading: The large "404" text in the background
• .errorMessage: The container for the terminal-style message
• .countdown: The countdown timer text
• .backButton: The "Go Back" button
• .cursor: The blinking cursor in the typewriter effect

Example of CSS Customization

/* In your global CSS file */
.errorPage {
  /* Override the background gradient */
  background-image: linear-gradient(120deg, #2c3e50 0%, #000000 100%) !important;
}

.errorPage .heading {
  /* Change the color of the large 404 text */
  color: rgba(255, 255, 255, 0.2) !important;
}

.errorPage .backButton {
  /* Customize the back button */
  background-color: #e74c3c !important;
}

Using with React Router v6

If you're using React Router v6 instead of v7, the component should still work as expected, as the core APIs used (useNavigate) are compatible between versions.

Troubleshooting

Common Issues

1. Component not redirecting: Make sure you have react-router-dom properly set up and that your routes are correctly defined.

2. Styling issues: If the component doesn't look as expected, check for CSS conflicts in your application. The component uses CSS modules to minimize conflicts, but global styles might still affect it.

3. Console errors: If you see console errors related to navigation, ensure you're using the component within a Router context.

Browser Compatibility

This component works in all modern browsers that support React 19, including:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance Considerations

The Error404 component uses several React hooks and effects to create the typewriter and blinking cursor animations. While these are optimized for performance, be aware that:

• The typewriter effect uses setInterval, which continues to run until the text is fully typed
• The cursor blinking effect uses setInterval, which runs continuously while the component is mounted
• The countdown timer uses setTimeout, which runs until the countdown reaches zero

These effects have minimal impact on performance but are worth noting for very performance-sensitive applications.

Examples

Basic Example

import { Error404 } from 'react-404-error-page';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="*" element={<Error404 />} />
    </Routes>
  );
}

With Layout Component

import { Error404 } from 'react-404-error-page';
import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';

function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="*" element={<Error404 />} />
      </Routes>
    </Layout>
  );
}

FAQ

Can I customize the error messages?

Currently, the component uses a predefined set of error messages. Future versions may include the ability to pass custom messages as props.

Can I change the countdown time?

The countdown is currently set to 10 seconds. Future versions may include the ability to customize this value.

Does this work with server-side rendering (SSR)?

Yes, the component is compatible with SSR frameworks like Next.js, but you'll need to ensure that react-router-dom is properly set up in your SSR environment.

Can I use this without react-router-dom?

The component currently depends on react-router-dom for navigation. If you're not using react-router-dom, you would need to modify the component to use your navigation solution.

Is the component accessible?

The component includes basic accessibility features, but future versions will focus on improving accessibility compliance.