react-web-bottomsheet v1.0.0

React Webview BottomSheet

A lightweight, customizable, draggable bottom sheet component for React applications, optimized for webviews in mobile applications.

Features

• 📱 Optimized for mobile and webview experiences
• 🔄 Smooth drag gestures with touch support
• ⚡ Snap points functionality
• 🎨 Highly customizable appearance and behavior
• 🌈 Responsive design with percentage and pixel-based sizing
• 📝 Written in TypeScript with complete type definitions
• 🧩 Context API for easy sheet management across components
• ♿ Fully accessible with ARIA attributes and keyboard support
• 🔧 Zero dependencies (other than React)
• 🚀 Enhanced dragging with DraggableBottomSheet component

Installation

npm install react-webview-bottomsheet
# or
yarn add react-webview-bottomsheet

Usage

Basic BottomSheet

import React, { useState } from "react";
import { BottomSheet } from "react-webview-bottomsheet";

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Bottom Sheet</button>

      <BottomSheet
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
        initialHeight="30%"
        maxHeight="90%"
        enableSnapping={true}
        snapPoints={[20, 50, 90]}
      >
        <div>
          <h2 id="sheet-title">Bottom Sheet Content</h2>
          <p>This is the content of your bottom sheet</p>
        </div>
      </BottomSheet>
    </div>
  );
};

export default App;

Enhanced DraggableBottomSheet (New!)

The DraggableBottomSheet component extends the basic BottomSheet with improved drag functionality:

import React, { useState } from "react";
import { DraggableBottomSheet } from "react-webview-bottomsheet";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentHeight, setCurrentHeight] = useState(50);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Bottom Sheet</button>
      <p>Current height: {currentHeight.toFixed(1)}%</p>

      <DraggableBottomSheet
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
        initialHeight="50%" // Start at 50% height
        snapPoints={[30, 50, 80]}
        // Enhanced drag functionality
        showDragArea={true}
        dragAreaText="Drag to resize"
        onHeightPercentChange={(height) => setCurrentHeight(height)}
      >
        <div>
          <h2>Draggable Bottom Sheet</h2>
          <p>This bottom sheet has enhanced drag functionality</p>
        </div>
      </DraggableBottomSheet>
    </div>
  );
};

DraggableBottomSheet Props

The DraggableBottomSheet component extends all props from BottomSheet and adds:

BottomSheet Props

Using the Context Provider

The library includes a context provider for managing bottom sheets across your application:

import React from "react";
import { BottomSheetProvider, useBottomSheet } from "react-webview-bottomsheet";

// Wrap your application with the provider
const App = () => {
  return (
    <BottomSheetProvider
      defaultProps={{ roundedCorners: true, cornerRadius: "16px" }}
    >
      <YourApp />
    </BottomSheetProvider>
  );
};

// Use the hook in any component
const YourComponent = () => {
  const { showBottomSheet, hideBottomSheet } = useBottomSheet();

  const handleOpenSheet = () => {
    showBottomSheet({
      children: <YourContent />,
      initialHeight: "40%",
      onClose: () => hideBottomSheet(),
    });
  };

  return <button onClick={handleOpenSheet}>Open Sheet</button>;
};

Browser Support

The component is designed to work on all modern browsers that support touch events, including:

• Chrome (Desktop & Mobile)
• Safari (Desktop & Mobile)
• Firefox (Desktop & Mobile)
• Edge

Optimizations for Mobile WebViews

This component is specifically optimized for use in mobile webviews:

• Smooth touch interactions with proper touch event handling
• Performance optimizations to reduce jank during dragging
• Proper handling of viewport heights for mobile screens
• Appropriate defaults for mobile UX patterns
• WebkitOverflowScrolling for smooth scrolling on iOS

Server-Side Rendering (SSR) Support

The component is fully compatible with server-side rendering frameworks like Next.js:

• Safely handles window and document references
• Proper hydration during client-side initialization
• Deferred calculations that depend on browser APIs

Accessibility

The component is built with accessibility in mind:

• Proper ARIA roles and attributes
• Keyboard navigation support
• Screen reader friendly
• Focus management
• Escape key support for closing

Development

# Install dependencies
npm install

# Run storybook for development
npm run storybook

# Run tests
npm test

# Build the package
npm run build

License

MIT © 신윤수