react-page-curl

A beautiful page curl effect component for React with theme toggle support. Perfect for adding a playful dark/light mode toggle to your website.

Installation

npm install react-page-curl

Usage

import { PageCurl } from 'react-page-curl';
import { useState } from 'react';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <div>
      <PageCurl
        size={72}
        isDarkMode={isDarkMode}
        onClick={() => setIsDarkMode(!isDarkMode)}
        lightModeColor="#1c1917"
        darkModeColor="#ffffff"
      />
      {/* Your app content */}
    </div>
  );
}

With next-themes (Next.js)

import { PageCurl } from 'react-page-curl';
import { useTheme } from 'next-themes';

function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <PageCurl
      size={72}
      isDarkMode={resolvedTheme === 'dark'}
      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
      lightModeColor="hsl(24 9.8% 10%)"
      darkModeColor="hsl(0 0% 100%)"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 72 | Width of the curl in pixels | | lightModeColor | string | "#1c1917" | Color shown in corner when in light mode | | darkModeColor | string | "#ffffff" | Color shown in corner when in dark mode | | isDarkMode | boolean | false | Whether current theme is dark mode | | onClick | () => void | undefined | Callback when curl corner is clicked | | hoverScale | number | 1.15 | Scale factor on hover (1.15 = 115%) | | transitionDuration | number | 150 | Transition duration in milliseconds | | shadow | string | "drop-shadow(-4px -2px 10px rgba(0,0,0,0.5))" | Custom shadow CSS filter | | className | string | "" | Additional className for container |

How It Works

The component renders a page curl effect in the top-left corner of your page. The corner behind the curl shows the "opposite" theme color - dark when in light mode, light when in dark mode. This creates a visual hint that clicking will reveal the other theme.

Features:

• 🎨 Customizable colors for both themes
• 🖱️ Hover effect with configurable scale
• 📱 Works with any React app
• ⚡ Zero configuration - just install and use
• 🎯 Click detection only on the visible curl area
• 📦 Image bundled inline - no assets to manage

License

MIT © Jack Consenstein