React ZT 404

A ready-to-use React 404 Not Found component with a responsive layout, light and dark themes, and automatic system theme detection.

Requirements

• Node.js 18 or later
• React 18 or later
• React DOM 18 or later

Installation

Install from npm

Install the package inside your React project:

npm install react-zt-404

You can also use pnpm:

pnpm add react-zt-404

Or yarn:

yarn add react-zt-404

Install from a local .tgz file

If you are using a locally built package, install the tarball from your React project:

npm install ./react-zt-404-1.0.2.tgz

If the tarball is in another directory, use a relative or absolute path:

npm install ../react-zt-404/react-zt-404-1.0.2.tgz

Restart your development server after installation:

npm run dev

The package injects its CSS automatically when the component is imported. You do not need to import a separate CSS file.

Basic Usage

Import and render the component in any React page:

import { NotFound } from "react-zt-404";

export default function NotFoundPage() {
  return <NotFound />;
}

Customize the Text

Use the component props to customize the title, description, button label, and button action:

import { NotFound } from "react-zt-404";

export default function MissingPage() {
  return (
    <NotFound
      title="Page not found"
      description="The link you opened is invalid or the page has been moved."
      buttonText="Back to home"
      onButtonClick={() => {
        window.location.href = "/";
      }}
    />
  );
}

Themes

The theme prop supports three values:

• "system": follows the user's operating system preference. This is the default.
• "light": always uses the light theme.
• "dark": always uses the dark theme.

import { NotFound } from "react-zt-404";

export default function DarkNotFound() {
  return <NotFound theme="dark" />;
}

To force the light theme:

<NotFound theme="light" />

When theme="system" is used, the component listens for system theme changes and updates automatically.

React Router Usage

Use a wildcard route to display the component for unknown URLs:

import { Route, Routes } from "react-router-dom";
import { NotFound } from "react-zt-404";
import Home from "./pages/Home";

export default function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

Use useNavigate when the button should navigate without a full page reload:

import { useNavigate } from "react-router-dom";
import { NotFound } from "react-zt-404";

export default function NotFoundRoute() {
  const navigate = useNavigate();

  return <NotFound onButtonClick={() => navigate("/")} />;
}

Component Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | title | string | Arabic default title | Main page heading | | description | string | Arabic default description | Supporting message below the heading | | buttonText | string | "الصفحة الرئيسية" | Text displayed inside the button | | onButtonClick | () => void | Not set | Callback fired when the button is clicked | | theme | "system" \| "light" \| "dark" | "system" | Color theme used by the component |

Complete Example

import { NotFound } from "react-zt-404";

export default function App() {
  const goHome = () => {
    window.location.assign("/");
  };

  return (
    <NotFound
      title="Sorry, this page does not exist"
      description="Check the URL or return to the home page to continue."
      buttonText="Go to home"
      onButtonClick={goHome}
      theme="system"
    />
  );
}

Run from Source

To run the library demo locally, clone or download the project, then run:

npm install
npm run dev

To create and preview a production build:

npm run build
npm run preview

To run ESLint:

npm run lint

Build and Install a Local Package

From the library directory, build the distribution files and create a tarball:

npm run build
npm pack

This creates a file similar to:

react-zt-404-1.0.2.tgz

Install it in another React project:

npm install ../react-zt-404/react-zt-404-1.0.2.tgz

Whenever you modify the library, run npm run build, create a new tarball with npm pack, and reinstall the updated .tgz file in the consuming project.