Advanced Examples

Explore advanced usage patterns for React Mower components.

Conditional Protection

You can conditionally apply protection based on certain conditions, such as authentication state:

import React, { useState } from 'react';
import { DevToolsBlocker, CursorProtect } from 'react-mower';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = () => {
    // Authentication logic
    setIsAuthenticated(true);
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
  };

  return (
    <div className="App">
      {!isAuthenticated ? (
        // Login screen without protection
        <div className="login-screen">
          <h1>Please Log In</h1>
          <button onClick={handleLogin}>Log In</button>
        </div>
      ) : (
        // Protected content after login
        <DevToolsBlocker>
          <CursorProtect message="Protected Area">
            <div className="authenticated-content">
              <h1>Welcome to Protected Area</h1>
              <p>This content is protected from unauthorized access.</p>
              <button onClick={handleLogout}>Log Out</button>
            </div>
          </CursorProtect>
        </DevToolsBlocker>
      )}
    </div>
  );
}

In this example, the protection is only applied after the user logs in. The login screen is accessible without protection.

Protecting Specific Routes

You can apply protection to specific routes in a React Router application:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { DevToolsBlocker, CursorProtect } from 'react-mower';

// Public pages
const Home = () => <h1>Home Page (Not Protected)</h1>;
const About = () => <h1>About Page (Not Protected)</h1>;

// Protected pages
const Dashboard = () => <h1>Dashboard (Protected)</h1>;
const PrivateData = () => <h1>Private Data (Protected)</h1>;

// Higher-Order Component for protected routes
const ProtectedRoute = ({ children }) => (
  <DevToolsBlocker>
    <CursorProtect message="Protected Content">
      {children}
    </CursorProtect>
  </DevToolsBlocker>
);

function App() {
  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/dashboard">Dashboard</Link></li>
            <li><Link to="/private">Private Data</Link></li>
          </ul>
        </nav>

        <Routes>
          {/* Public routes */}
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />

          {/* Protected routes */}
          <Route path="/dashboard" element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } />
          <Route path="/private" element={
            <ProtectedRoute>
              <PrivateData />
            </ProtectedRoute>
          } />
        </Routes>
      </div>
    </Router>
  );
}

This approach allows you to have both protected and unprotected routes in your application.

Selective Component Protection

You can apply protection to specific components while leaving others unprotected:

import React from 'react';
import { CursorProtect } from 'react-mower';

function SensitiveComponent() {
  return (
    <CursorProtect message="Sensitive Component">
      <div className="sensitive-content">
        <h2>Sensitive Information</h2>
        <p>This component contains sensitive information that needs protection.</p>
        <ul>
          <li>Secret Data 1</li>
          <li>Secret Data 2</li>
          <li>Secret Data 3</li>
        </ul>
      </div>
    </CursorProtect>
  );
}

function PublicComponent() {
  return (
    <div className="public-content">
      <h2>Public Information</h2>
      <p>This component contains public information that doesn't need protection.</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <header>
        <h1>Mixed Protection Example</h1>
      </header>
      <main>
        <PublicComponent />
        <SensitiveComponent />
        <PublicComponent />
      </main>
    </div>
  );
}

This approach allows you to selectively protect only the components that contain sensitive information.

Back to Home Back to Basic Examples