https://github.com/corasan/modal-sheet
iOS like fullscreen modal Sheet component for iOS and Android.
https://github.com/corasan/modal-sheet
react-native typescript
Last synced: 9 months ago
JSON representation
iOS like fullscreen modal Sheet component for iOS and Android.
- Host: GitHub
- URL: https://github.com/corasan/modal-sheet
- Owner: corasan
- License: mit
- Created: 2024-04-04T12:41:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T23:57:16.000Z (almost 2 years ago)
- Last Synced: 2025-01-23T00:46:06.261Z (over 1 year ago)
- Topics: react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 1.55 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Installation
```bash
npm install @corasan/modal-sheet
yarn add @corasan/modal-sheet
bun add @corasan/modal-sheet
```
## Usage
First, wrap your application with the `ModalSheetProvider` component.
```tsx
import { ModalSheetProvider } from '@corasan/modal-sheet';
function App() {
return (
);
}
```
Use refs to expand and minimize the modal sheet.
```tsx
import { ModalSheetStackRef, ModalSheetStack } from '@corasan/modal-sheet';
function YourComponent() {
const modalRef = useRef()
return (
modalRef.current.open())} />
Title
{
modalRef.current.dismiss();
}}
/>
);
}
```
## Components
### ModalSheetStack
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.
#### Props
| Name | Type | Default | Description | Required |
| --- | --- | --- | --- | --- |
| ref | React.RefObject\ | - | 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 |
| onDismiss | () => void | - | Callback when the modal sheet is dismissed | No |
| enableDragToDismiss | boolean | true | Enable dragging to dismiss the modal sheet | No |
#### Methods
| Name | Type | Description |
| --- | --- | --- |
| open | () => void | Open the modal sheet |
| dismiss | () => void | Dismiss the modal sheet |