)
}
`

API Reference

$3

The main component that prevents body scroll when mounted.

`tsx
import ScrollBlocker from 'react-scroll-blocker'
; isActive={true} // Optional: whether the blocker is active (default: true)
accountForScrollbars={true} // Optional: prevent layout shift (default: true)
>
{/ Optional: scrollable content for mobile /}

`

#### Props

| Prop | Type | Default | Description |
| ---------------------- | ----------- | ----------- | ------------------------------------------------------------- |
| isActive | boolean | true | Whether the scroll blocker is active |
| accountForScrollbars | boolean | true | Whether to add padding to compensate for removed scrollbar |
| children | ReactNode | undefined | Child elements that should remain scrollable on touch devices |

$3

A React hook that provides programmatic control over scroll blocking.

`tsx
import { useScrollBlocker } from 'react-scroll-blocker'

function MyComponent() {
const { blockScroll, unblockScroll, isBlocked } = useScrollBlocker()

return (



)
}
`

#### Parameters

| Parameter | Type | Default | Description |
| ---------------------- | --------- | ------- | -------------------------------------- |
| isBlocked | boolean | false | Whether scroll should be blocked |
| accountForScrollbars | boolean | true | Whether to account for scrollbar width |

#### Returns

| Property | Type | Description |
| --------------- | ------------ | ----------------------------------- |
| blockScroll | () => void | Function to manually block scroll |
| unblockScroll | () => void | Function to manually unblock scroll |
| isBlocked | boolean | Current block state |

$3

A component that allows its children to remain scrollable even when ScrollBlocker is active. This is particularly useful for mobile devices.

`tsx
import { ScrollBlocker, TouchScrollable } from 'react-scroll-blocker'

function ScrollableModal() {
return (
<>







)
}
`

#### Alternative: Automatic TouchScrollable

When you pass children to ScrollBlocker, they are automatically wrapped in TouchScrollable:

`tsx





`

Usage Examples

$3

`tsx
import React, { useState } from 'react'
import ScrollBlocker from 'react-scroll-blocker'

function Modal() {
const [isOpen, setIsOpen] = useState(false)

return (




)}