react-maintenance

🚧 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.