react-modal-sheet 2.0.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -18
- package/dist/hooks.d.ts +5 -0
- package/dist/react-modal-sheet.cjs.development.js +172 -219
- package/dist/react-modal-sheet.cjs.development.js.map +1 -1
- package/dist/react-modal-sheet.cjs.production.min.js +1 -1
- package/dist/react-modal-sheet.cjs.production.min.js.map +1 -1
- package/dist/react-modal-sheet.esm.js +172 -219
- package/dist/react-modal-sheet.esm.js.map +1 -1
- package/dist/sheet.d.ts +1 -0
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
- package/src/SheetContent.tsx +6 -1
- package/src/SheetHeader.tsx +6 -1
- package/src/hooks.tsx +12 -0
- package/src/sheet.tsx +2 -2
- package/src/types.tsx +1 -1
package/README.md
CHANGED
|
@@ -71,24 +71,25 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
|
|
|
71
71
|
|
|
72
72
|
## Props
|
|
73
73
|
|
|
74
|
-
| Name | Required | Default | Description
|
|
75
|
-
| ---------------------- | -------- | ------------------------------------ |
|
|
76
|
-
| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet.
|
|
77
|
-
| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not.
|
|
78
|
-
| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user.
|
|
79
|
-
| `disableDrag` | no | false | Disable drag for the whole sheet.
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
74
|
+
| Name | Required | Default | Description |
|
|
75
|
+
| ---------------------- | -------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
76
|
+
| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet. |
|
|
77
|
+
| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not. |
|
|
78
|
+
| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user. |
|
|
79
|
+
| `disableDrag` | no | false | Disable drag for the whole sheet. |
|
|
80
|
+
| `disableScrollLocking` | no | false | Disable's scroll locking for the documents `body` element while sheet is opened. Can be useful if you face issues with input elements and the iOS software keyboard. See [this Issue](https://github.com/Temzasse/react-modal-sheet/issues/135) |
|
|
81
|
+
| `detent` | no | `'full-height'` | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`. |
|
|
82
|
+
| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts. |
|
|
83
|
+
| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed. |
|
|
84
|
+
| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts. |
|
|
85
|
+
| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed. |
|
|
86
|
+
| `onSnap` | no | | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop. |
|
|
87
|
+
| `snapPoints` | no | | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen. |
|
|
88
|
+
| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). |
|
|
89
|
+
| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. |
|
|
90
|
+
| `tweenConfig` | no | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point. |
|
|
91
|
+
| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. |
|
|
92
|
+
| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location). |
|
|
92
93
|
|
|
93
94
|
## Methods and properties
|
|
94
95
|
|
package/dist/hooks.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { SheetEvents } from './types';
|
|
3
|
+
import { BoundingBox } from 'framer-motion';
|
|
3
4
|
export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
|
|
4
5
|
export declare function useModalEffect(isOpen: boolean, rootId?: string): void;
|
|
5
6
|
export declare function useEventCallbacks(isOpen: boolean, callbacks: React.MutableRefObject<SheetEvents>): {
|
|
@@ -8,3 +9,7 @@ export declare function useEventCallbacks(isOpen: boolean, callbacks: React.Muta
|
|
|
8
9
|
export declare function useWindowHeight(): number;
|
|
9
10
|
export declare function usePrevious<T>(state: T): T | undefined;
|
|
10
11
|
export declare function useEvent<T extends (...args: any[]) => any>(handler: T): T;
|
|
12
|
+
export declare function useDragConstraints(): {
|
|
13
|
+
constraintsRef: React.MutableRefObject<any>;
|
|
14
|
+
onMeasureDragConstraints: () => BoundingBox;
|
|
15
|
+
};
|