Rafi Wirana

Design Engineer

Preview

Work in Progress: This installation guide is still being refined. Some documentation may be incomplete.

Copy link

Reveal

Securely reveal sensitive information like credit card numbers, CVC codes, and private data with platform-specific animations and auto-hide timer.

Installation

✨ No external dependencies required

Component location

components/craft/Reveal/index.tsx

Usage

Basic example

import { Reveal } from '@/components/craft/Reveal';
import { useState } from 'react';

export function Example() {
  return (
    <Reveal ariaLabel="Credit card number">
      <span>4532 1234 5678 9010</span>
    </Reveal>
  );
}

More Examples

Credit Card Number

Reveal credit card with last 4 digits visible

<Reveal ariaLabel="Credit card number">
  <span>4532 1234 5678 9010</span>
</Reveal>

Custom Hidden Text

Use custom placeholder text instead of auto-generated dots

<Reveal 
  hiddenText="•••-•••-••••" 
  ariaLabel="Phone number"
>
  <span>123-456-7890</span>
</Reveal>

Controlled Reveal

Control reveal state externally

const [isRevealed, setIsRevealed] = useState(false);

<Reveal 
  revealed={isRevealed}
  onRevealedChange={setIsRevealed}
  ariaLabel="API key"
>
  <span>sk_live_51234567890abcdef</span>
</Reveal>

Custom Timer Duration

Auto-hide after 10 seconds instead of default 5 seconds

<Reveal 
  revealDuration={10000}
  ariaLabel="Password"
>
  <span>MySecureP@ssw0rd!</span>
</Reveal>

Different Sizes

Adjust button sizes for different contexts

<div className="space-y-4">
  <Reveal size="sm" ariaLabel="Small size">
    <span>1234 5678 9012</span>
  </Reveal>
  
  <Reveal size="md" ariaLabel="Medium size">
    <span>1234 5678 9012</span>
  </Reveal>
  
  <Reveal size="lg" ariaLabel="Large size">
    <span>1234 5678 9012</span>
  </Reveal>
</div>

With Custom Styling

Apply custom styles to the container

<Reveal 
  className="p-4 bg-gray-100 rounded-lg"
  ariaLabel="Styled reveal"
>
  <span className="font-bold text-lg">
    Secret: ABC-DEF-GHI
  </span>
</Reveal>

API Reference

Prop	Type	Default	Description
`children`Required	`React.ReactNode`	—	The sensitive content to be revealed. Can be text or formatted elements.
`hiddenText`	`string`	—	Custom placeholder text when content is hidden. If not provided, automatically generates dots with last 4 characters visible.
`className`	`string`	—	Additional CSS classes for the root container element
`revealed`	`boolean`	—	Controlled revealed state. When provided, component operates in controlled mode.
`defaultRevealed`	`boolean`	`false`	Default revealed state for uncontrolled component
`onRevealedChange`	`(revealed: boolean) => void`	—	Callback fired when the revealed state changes
`revealDuration`	`number`	`5000`	Duration in milliseconds before automatically hiding content (default: 5000ms / 5 seconds)
`ariaLabel`	`string`	—	Accessible label for screen readers to describe the sensitive content
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Size variant for the reveal and copy buttons