react-dynamic-bottom-sheet v2.1.0

Storybook

Installation

# With npm
npm install react-dynamic-bottom-sheet

# With yarn
yarn add react-dynamic-bottom-sheet

# With pnpm
pnpm install react-dynamic-bottom-sheet

Usage

import Sheet from "react-dynamic-bottom-sheet";
import { useState } from 'react';

function Example() {
  const [isOpen, setOpen] = useState<boolean>(false);
  // 시트가 열립니다
  // 해당 시트 포지션으로 시트가 열립니다.
  const handleSheetOpen = () => {
      setOpen(true);
  };

    const handleSheetClose = () => {
        setOpen(false);
    };
  return (
    <>
      <button onClick={() => handleSheetOpen()}>Open sheet</button>
      <Sheet isVisible={isOpen} onClose={()=>handleSheetClose()}>
         <Your_Component/>
      </Sheet>
    </>
  );
}

Edge Sheet

// Edge Sheet Example
import React from "react";
import Sheet, { type SheetProps } from "./index";
function Example() {
    const sheetProps: SheetProps = {
        isVisible: true,
        isEdge: true,
        initialPosition: "edge",
        sheetLimit: [10, 50],
    };
    
    return (
        <div className="App" style={{ background: "#ccc", height: "100vh" }}>
            <Sheet {...sheetProps}>
                <YOUR_COMPONENT>
            </Sheet>
        </div>
    );
}

Props

Theming

.sheet-portal{
    
}

.sheet-container{

}

.sheet-header{

}

.sheet-scroll{

}

License

MIT