Skip to content

Commit

Permalink
feat: adds prop to opt-out of scroll-locking (#138)
Browse files Browse the repository at this point in the history 
* feat: adds opt-out prop for scroll locking

* wip
  • Loading branch information
@eimerreis
eimerreis authored Oct 7, 2023
1 parent c463de0 commit 17f8500
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 20 deletions.
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,24 +71,25 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any

## Props

| Name | Required | Default | Description |
| ---------------------- | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet. |
| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not. |
| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user. |
| `disableDrag` | no | false | Disable drag for the whole sheet. |
| `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'`. |
| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts. |
| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed. |
| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts. |
| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed. |
| `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. |
| `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. |
| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). |
| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. |
| `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. |
| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. |
| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location). |
| Name | Required | Default | Description |
| ---------------------- | -------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet. |
| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not. |
| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user. |
| `disableDrag` | no | false | Disable drag for the whole sheet. |
| `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) |
| `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'`. |
| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts. |
| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed. |
| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts. |
| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed. |
| `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. |
| `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. |
| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). |
| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. |
| `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. |
| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. |
| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location). |

## Methods and properties

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "2.0.0",
"version": "2.1.0",
"license": "MIT",
"name": "react-modal-sheet",
"description": "Flexible bottom sheet component for your React apps",
Expand Down
3 changes: 2 additions & 1 deletion src/sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
onCloseEnd,
onSnap,
children,
disableScrollLocking = false,
isOpen,
snapPoints,
rootId,
Expand Down Expand Up @@ -207,7 +208,7 @@ const Sheet = React.forwardRef<any, SheetProps>(

// Framer Motion should handle body scroll locking but it's not working
// properly on iOS. Scroll locking from React Aria seems to work much better.
usePreventScroll({ isDisabled: !isOpen });
usePreventScroll({ isDisabled: disableScrollLocking === true || !isOpen });

const dragProps = React.useMemo(() => {
const dragProps: SheetContextType['dragProps'] = {
Expand Down
1 change: 1 addition & 0 deletions src/types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export type SheetProps = {
initialSnap?: number; // index of snap points array
tweenConfig?: SheetTweenConfig;
disableDrag?: boolean;
disableScrollLocking?: boolean;
prefersReducedMotion?: boolean;
} & SheetEvents &
React.ComponentPropsWithoutRef<typeof motion.div>;
Expand Down

0 comments on commit 17f8500

Please sign in to comment.