🚧 React Maintenance

A lightweight and fully customizable React component to gracefully handle maintenance mode in your application. Easily restrict access by IP, schedule maintenance windows, show countdowns, and display custom messages or components.

• 📑 React Maintenance Documentation

🚀 Features

• Simple and easy to use
• Fully customizable message and styles
• Responsive design for all devices
• Quick setup with minimal configuration

📦 Installation

Install the package using npm or yarn:

npm install react-maintenance

or

yarn add react-maintenance

📌 Usage/Examples

Import and use the Maintenance component in your React application:

// Import the Maintenance component
import React from 'react';
import { Maintenance } from 'react-maintenance';

const App = () => {
  // Configuration for Maintenance mode
  const maintenanceConfig = {
    CustomComponent: <div>Maintenance mode on</div>, // Optional: Customize the message displayed during maintenance mode.
    allowedIPs: ['192.156.2.564', '651.25.1.54'], // Optional: List of IPs allowed to bypass maintenance mode.
  };

  return (
    <>
      {/* Wrap your application inside the Maintenance component */}
      <Maintenance {...maintenanceConfig}>
        {/* Content displayed when maintenance mode is off */}
        <div>Hello World</div>
      </Maintenance>
    </>
  );
};

export default App;

🛠 Props

The Maintenance component accepts the following props:

| Prop | Type | Default Value | Description | | ----------------- | ----------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | children | ReactNode | null | The content to render when the application is not in maintenance mode or the IP is allowed. | | CustomComponent | ReactNode | null | A custom React component to display during maintenance mode. | | allowedIPs | string[] | [] | Array of IP addresses allowed to bypass maintenance mode. | | startTime | string | null | Start time of the maintenance window (ISO string format). | | endTime | string | null | End time of the maintenance window (ISO string format). | | showCountdown | boolean | false | Shows a live countdown timer until the end of the maintenance window. | | title | string | "We'll be back soon!" | Title text shown during maintenance. | | message | string | "Sorry for the inconvenience. We're performing some scheduled maintenance." | Message text shown during maintenance. | | customStyles | object | {} | Custom style overrides. Supports keys: page, container, title, message. Example below. |

🧩 Example customStyles object

customStyles={{
  page: { padding: '2rem' },
  container: { borderRadius: '8px' },
  title: { fontSize: '2.5rem' },
  message: { fontSize: '1.2rem' }
}}

🌐 IP Whitelisting

You can allow specific IP addresses to bypass maintenance mode using the allowedIPs prop. IP is fetched via https://ipinfo.io/json.

📅 Time-Based Maintenance

Pass startTime and endTime as ISO strings to enable maintenance mode only during a specific window.

⏳ Countdown Timer

Set showCountdown={true} to show a live countdown until the end of the maintenance window.

🧪 Environment Support

Maintenance mode is only active when REACT_APP_PRODUCTION=true is set in your environment. This ensures it doesn't affect development builds.

📝 License

MIT – Feel free to use and contribute!

🙋‍♂️ Author Details

📞 Support

For any issues or feature requests, feel free to open an issue or reach out via email.