@metadiv-studio/sheet

A lightweight, accessible sheet component for React applications. This package provides a customizable slide-out panel component that's perfect for sidebars, forms, and overlay content.

📦 Installation

npm i @metadiv-studio/sheet

🎯 Description

The @metadiv-studio/sheet package provides a modern, accessible sheet component built with React and TypeScript. It features:

• Smooth animations with CSS transitions
• Multiple size variants (small, medium, large)
• Responsive design that adapts to different screen sizes
• Accessibility features including proper focus management
• Customizable styling with Tailwind CSS classes
• TypeScript support with full type definitions
• Body scroll prevention when the sheet is open

🚀 Usage

Basic Example

import { useState } from 'react'
import Sheet from '@metadiv-studio/sheet'

function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Sheet
      </button>
      
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <h2>Sheet Content</h2>
        <p>This is the content inside the sheet.</p>
        <button onClick={() => setIsOpen(false)}>
          Close
        </button>
      </Sheet>
    </div>
  )
}

Different Sizes

import Sheet from '@metadiv-studio/sheet'

// Small sheet (default)
<Sheet open={isOpen} onOpenChange={setIsOpen} size="small">
  <div>Small content</div>
</Sheet>

// Medium sheet
<Sheet open={isOpen} onOpenChange={setIsOpen} size="medium">
  <div>Medium content</div>
</Sheet>

// Large sheet
<Sheet open={isOpen} onOpenChange={setIsOpen} size="large">
  <div>Large content</div>
</Sheet>

Custom Styling

import Sheet from '@metadiv-studio/sheet'

<Sheet 
  open={isOpen} 
  onOpenChange={setIsOpen}
  className="bg-blue-50 border-l-4 border-blue-500"
>
  <div className="space-y-4">
    <h3 className="text-lg font-semibold text-blue-900">
      Custom Styled Sheet
    </h3>
    <p className="text-blue-700">
      This sheet has custom background and border styling.
    </p>
  </div>
</Sheet>

Form Example

import { useState } from 'react'
import Sheet from '@metadiv-studio/sheet'

function FormSheet() {
  const [isOpen, setIsOpen] = useState(false)
  const [formData, setFormData] = useState({ name: '', email: '' })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Form submitted:', formData)
    setIsOpen(false)
  }

  return (
    <>
      <button 
        onClick={() => setIsOpen(true)}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Open Form
      </button>

      <Sheet open={isOpen} onOpenChange={setIsOpen} size="medium">
        <form onSubmit={handleSubmit} className="space-y-4">
          <h2 className="text-xl font-semibold">Contact Form</h2>
          
          <div>
            <label htmlFor="name" className="block text-sm font-medium mb-1">
              Name
            </label>
            <input
              id="name"
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-sm font-medium mb-1">
              Email
            </label>
            <input
              id="email"
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>

          <div className="flex gap-2 pt-4">
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            >
              Submit
            </button>
            <button
              type="button"
              onClick={() => setIsOpen(false)}
              className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
            >
              Cancel
            </button>
          </div>
        </form>
      </Sheet>
    </>
  )
}

🔧 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | false | Controls whether the sheet is open or closed | | onOpenChange | (open: boolean) => void | - | Callback function when the sheet open state changes | | size | 'small' \| 'medium' \| 'large' | 'small' | Controls the width of the sheet | | children | React.ReactNode | - | Content to render inside the sheet | | className | string | '' | Additional CSS classes for custom styling |

📱 Responsive Behavior

The sheet component automatically adapts to different screen sizes:

• Small: sm:w-1/2 lg:w-1/3 xl:w-1/4 (25-50% width)
• Medium: lg:w-1/2 xl:w-1/3 (33-50% width)
• Large: w-full lg:w-3/4 (75-100% width)

🎨 Styling

The component uses Tailwind CSS classes and can be customized using the className prop. The default styling includes:

• Dark overlay background (bg-black/50)
• Smooth transitions (transition-transform duration-300)
• Shadow effects (shadow-xl)
• Responsive width classes
• Close button with hover effects

♿ Accessibility

• Focus management: The sheet prevents body scroll when open
• Keyboard navigation: Users can close the sheet with the close button
• Click outside: Clicking the overlay closes the sheet
• Semantic structure: Proper button and overlay elements

🔗 Dependencies

This package has the following peer dependencies:

• React 18+
• React DOM 18+

📄 License

UNLICENSED

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.