Getting Started

react-maintenance is a simple React component that helps you display maintenance screens in your application. It's perfect for scheduled downtime, unexpected outages, or when you need to temporarily disable access to your application.

Installation

You can install react-maintenance via npm, yarn, or pnpm:

npm

npm install react-maintenance

yarn

yarn add react-maintenance

pnpm

pnpm add react-maintenance

Basic Usage

Here's a simple example of how to use the Maintenance component:

import React from 'react';
import { Maintenance } from 'react-maintenance';

function App() {
  // This can be a state variable or a prop
  const isUnderMaintenance = true;

  return (
    <div className="App">
      <Maintenance 
        title="Under Maintenance"
        message="We are currently performing scheduled maintenance. Please check back later."
      />
      
      {/* Your regular app content here */}
      {!isUnderMaintenance && (
        <main>
          <h1>Welcome to My App</h1>
          <p>This content won't be shown when maintenance mode is enabled</p>
        </main>
      )}
    </div>
  );
}

export default App;

Key Concepts

Children Prop

The Maintenance component accepts children, which are only rendered when maintenance mode is disabled:

<Maintenance>
  <YourApp />
</Maintenance>

Next Steps

Now that you understand the basics, explore the following resources to learn more:

API Reference - Learn about all available props and options
Examples - See more advanced usage examples
Styling - Learn how to customize the appearance