Reveal

Reveal

Single collapsible section — click to show or hide content

Installation

npx @ravikumarsurya/mdx-ui add reveal

Usage

import { Reveal } from "@/components/mdx/reveal";
 
<Reveal label="Show solution">
  The answer is to use a hash map for O(1) lookups.
</Reveal>;

Examples

Think about what data structure gives you O(1) average-case lookup.

Code solution reveal

<Reveal label="Show solution">
  ```tsx
  function twoSum(nums: number[], target: number): number[] {
    const map = new Map<number, number>()
    for (let i = 0; i < nums.length; i++) {
      const complement = target - nums[i]
      if (map.has(complement)) return [map.get(complement)!, i]
      map.set(nums[i], i)
    }
    return []
  }
  ```
</Reveal>

Hint reveal

<Reveal label="Need a hint?">
  Think about what data structure gives O(1) lookup by value.
</Reveal>

Expanded by default

<Reveal label="Explanation" defaultOpen>
  Merge sort divides the array in half recursively, then merges the sorted
  halves. The divide step is O(log n) levels deep, and each level does O(n)
  work.
</Reveal>

Props

PropTypeDefaultDescription
labelstring"Show"Text shown on the toggle button
defaultOpenbooleanfalseWhether the content starts expanded
childrenReact.ReactNodeContent to reveal (required)
classNamestringAdditional CSS classes