[!WARNING] This package is still in development and not fully featured yet (experimental). Please use with caution.
npm install @corasan/modal-sheet
yarn add @corasan/modal-sheet
bun add @corasan/modal-sheetFirst, wrap your application with the ModalSheetProvider component.
import { ModalSheetProvider } from '@corasan/modal-sheet';
function App() {
return (
<ModalSheetProvider>
<YourApp />
</ModalSheetProvider>
);
}Use refs to expand and minimize the modal sheet.
import { ModalSheet, ModalSheetRef, ModalSheetStackRef } from '@corasan/modal-sheet';
function YourComponent() {
const modalRef = useRef<ModalSheetRef>()
const modalSheetRef = useRef<ModalSheetRef>()
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Butto title="Open Modal Sheet" onClick={() => modalRef.current.extend())} />
<ModalSheet ref={modalRef} name="modal-drawer" sizes={[100, 300, 600]}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", justifyContent: "center" }}>
<Text style={{ fontWeight: "500", fontSize: 18 }}>Title</Text>
</View>
<View
style={{
paddingVertical: 40,
alignItems: "center",
justifyContent: "center",
}}
>
<Button
title="Close Modal"
onPress={() => {
modalRef.current.minimize();
}}
/>
</View>
</View>
</ModalSheet>
<ModalSheet ref={modalSheetRef} name="modal-sheet" sizes={[100, 300, 600]}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", justifyContent: "center" }}>
<Text style={{ fontWeight: "500", fontSize: 18 }}>Title</Text>
</View>
<View
style={{
paddingVertical: 40,
alignItems: "center",
justifyContent: "center",
}}
>
<Button
title="Close Modal"
onPress={() => {
modalRef.current.minimize();
}}
/>
</View>
</View>
</ModalSheet>
</View>
);
}The ModalSheet component is a modal sheet that can be expanded and minimized. It can be used to create a drawer-type of modal sheet and can be stacked on top of each other.
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| ref | React.RefObject<ModalSheetRef> | - | Ref for the modal sheet | Yes |
| name | string | - | The name of the modal sheet | Yes |
| children | ReactNode | - | The children components | Kinda yeah |
| containerStyle | string | - | Styles for the modal sheet container | No |
| noHandle | boolean | false | Hide the handle | No |
| sizes | number[] | [100, 300, 600] | The sizes the modal can be expanded to | No |
| backdropColor | string | "black" | The color of the backdrop | No |
| backdropOpacity | number | 0.4 | The opacity of the backdrop | No |
| offset | number | 0 | Add an offset at the bottom of the modal sheet when it's minimized | No |
The ModalSheetStack component is a modal sheet that can be opened and dismissed. It creates a modal sheet effect similar to the iOS modal sheet.
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| ref | React.RefObject<ModalSheetStackRef> | - | Ref for the modal sheet | Yes |
| name | string | - | The name of the modal sheet | Yes |
| children | ReactNode | - | The children components | Kinda yeah |
| containerStyle | string | - | Styles for the modal sheet container | No |
| noHandle | boolean | false | Hide the handle | No |
| backdropColor | string | "black" | The color of the backdrop | No |
| backdropOpacity | number | 0.4 | The opacity of the backdrop | No |