Privacy helpers

Privacy helpers control how specific elements appear in session replay.

Screeb automatically masks password inputs and elements matched by common sensitive-keyword heuristics. Use these helpers for custom sensitive content.

import { useRef, useEffect } from "react";
import { useScreeb } from "@screeb/sdk-react";

const CheckoutForm = () => {
  const cardInputRef = useRef<HTMLInputElement>(null);
  const { ScreebMaskText, ScreebId } = useScreeb();

  useEffect(() => {
    if (cardInputRef.current) {
      ScreebMaskText(cardInputRef.current);
      ScreebId(cardInputRef.current, "card_number_input");
    }
  }, []);

  return <input ref={cardInputRef} type="text" />;
};

Helper	Description
ScreebMaskText(element)	Masks text content in session replay.
ScreebNoCapture(element)	Excludes the element from session replay capture.
ScreebId(element, id)	Sets a stable element ID for IAM targeting and replay context.

Using CSS classes directly

If you don't want to use the hook, apply the equivalent class or attribute directly in your JSX:

<input className="screeb-mask-text" />
<div className="screeb-no-capture">...</div>
<button data-screeb-id="checkout_button">Checkout</button>