useScreenBlur

useScreenBlur.tsx

useScreenBlur

// Instantly blurs the entire screen or selected areas for sensitive information protection

Quick Usage

const { isBlurred, blur, unblur, toggle } = useScreenBlur();

Features

Screen Blur

Element Blur

Backdrop Filter

Sensitive Data Protection

When to Use

Useful for protecting sensitive information, modal backgrounds, privacy screens, or focus enhancement.

Interactive Example

📋 Sensitive Information

Credit Card: 4532 1234 5678 9012

SSN: 123-45-6789

API Key: sk_live_a1b2c3d4e5f6g7h8

Password: MySecretPassword123!

Status: Screen is CLEAR | Element is CLEAR

Try this:

• Click "Blur Screen" to protect all sensitive data

• Use "Blur Element" to protect specific content

• Perfect for privacy screens and modal overlays!

• Great for protecting data during screen sharing

Complete Example

import { useScreenBlur } from '@usegrand/react-hokss';

function SensitiveDataView() {
  const { isBlurred, blur, unblur, toggle, blurElement, unblurElement } = useScreenBlur();

  const handleProtectScreen = () => {
    blur({ 
      blurAmount: '10px', 
      backdropFilter: true,
      zIndex: 9999 
    });
  };

  const handleBlurElement = (element: HTMLElement) => {
    blurElement(element, { blurAmount: '8px' });
  };

  return (
    <div>
      <div className="sensitive-content">
        <h3>Sensitive Information</h3>
        <p>Credit Card: **** **** **** 1234</p>
        <p>SSN: ***-**-****</p>
      </div>
      
      <div className="controls">
        <button onClick={handleProtectScreen}>
          {isBlurred ? 'Unprotect' : 'Protect'} Screen
        </button>
        <button onClick={toggle}>
          Toggle Blur
        </button>
        <button onClick={unblur}>
          Clear Blur
        </button>
      </div>
    </div>
  );
}