react-maintenance v0.1.5

react-maintenance

react-maintenance is a lightweight React component that allows you to display a customizable maintenance mode screen for your application. It’s ideal for informing users about ongoing updates or downtime.

Features

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

Installation

Install the package using npm or yarn:

npm install 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 = {
    CustomeComponent: <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:

Notes

• Environment Variable: The Maintenance component checks the REACT_APP_PRODUCTION environment variable to determine if the app is in production mode. Set it to 'true' to enable maintenance mode.
• IP Fetching: The user's IP address is fetched using the https://ipinfo.io/json API. Make sure your application has access to this service or replace it with another API if needed.

🔗 Author Details