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
Prop | Type | Required? | Default Value | Description |
---|---|---|---|---|
children | ReactNode |
o | - | |
isVisible | boolean |
o | false | sheet가 열려 있는지 여부를 알려주는 props |
defaultHeight | number |
x | 0.3 | sheet 기본 높이, 높이는 0.15 ~ 0.5 제한 입니다. 제한치를 넘을 경우 경고 문구와 함께 default value로 반환 됩니다. |
edgeHeight | number or undefined |
x | - | edgeHeight 를 Props로 넘길 경우 sheet를 닫아도 가장자리에 Sheet가 닫히지 않고 남아 있습니다. 높이는 0 ~ 0.15 제한 입니다. 제한치를 넘을 경우 경고 문구와 함께 default value로 반환 됩니다. |
maxHeight | number |
x | 0.9 | sheet 최대 높이, 높이는 0.5 ~ 1 제한 입니다. 제한치를 넘을 경우 경고 문구와 함께 default value로 반환 됩니다. |
onClose | function |
x | - | sheet 가 닫혔을 때의 callback function |
onStart | function |
x | - | sheet 에 touch(pointer)가 시작 되었을떄의 callback function |
onMove | function |
x | - | sheet 가 움직일 떄의 callback function |
onEnd | function |
x | - | sheet 에 touch(pointer)가 끝났을 때의 callback function |
initialPosition | default or max |
x | "default" | 시트가 열릴 때의 포지션 정의 |
sheetLimit | [number.number] |
x | "[15,50]" | 0 번의 index는 닫히는 위치 입니다. isEdge 가 true 일 경우 Edge 컴포넌트 위치 입니다.1 번의 index는 defaultHeight 와 maxHeight 중간값을 정하는 값 입니다. |
isEdge | boolean |
x | - | Sheet Edge Components 여부 |
classname | string |
x | - | classname 재활당 |
Theming
.sheet-portal{
}
.sheet-container{
}
.sheet-header{
}
.sheet-scroll{
}
License
MIT