pii-mask

MaskPII Component

React component for masking PII in rendered text.

Usage

import { MaskPII } from '@pii-mask/react';

function UserProfile({ email }: { email: string }) {
  return (
    <div>
      <MaskPII mode="mask">{email}</MaskPII>
    </div>
  );
}

Props

PropTypeDefaultDescription
childrenstringrequiredThe string to mask
modeMaskMode'mask'Masking mode
detectstring[]allDetector IDs or categories to run
revealbooleanfalseShow original value (for role-gated UIs)
classNamestringCSS class for the wrapper span
styleCSSPropertiesInline styles

Reveal prop

The reveal prop renders the raw unmasked value. It is the caller's responsibility to gate this on authorization:

<MaskPII mode="mask" reveal={isAdmin}>
  {email}
</MaskPII>

Try it in the browser ↗