Content Guard

A React library for protecting content during online exams by enforcing fullscreen mode and detecting browser extensions.

Installation

1npm install @cwncollab-org/content-guard

Usage

1import { ContentGuard, ContentGuardProvider, useContentGuard } from '@cwncollab-org/content-guard';
2
3function App() {
4  return (
5    <ContentGuardProvider>
6      <AppContent />
7    </ContentGuardProvider>
8  );
9}
10
11function AppContent() {
12  const { requestFullscreen, isFullscreen } = useContentGuard();
13
14  return (
15    <div>
16      <ContentGuard
17        replacement={<div>Please enter fullscreen mode to view content</div>}
18      >
19        <div>Your protected content here</div>
20      </ContentGuard>
21      
22      {!isFullscreen && (
23        <button onClick={requestFullscreen}>
24          Enter Fullscreen
25        </button>
26      )}
27    </div>
28  );
29}

Components and Hooks

ContentGuardProvider

A context provider that manages the fullscreen state and browser extension detection.

ContentGuard

A component that wraps content that should only be visible in fullscreen mode.

Props

• replacement: React node to display when not in fullscreen mode
• style: Optional CSS styles for the wrapper
• children: Content to protect

useContentGuard

A hook that provides access to the content guard functionality.

Returns

• requestFullscreen: Function to request fullscreen mode
• isFullscreen: Boolean indicating if the app is in fullscreen mode
• isExtensionDetected: Boolean indicating if a browser extension was detected

License

MIT