# ScrollLock

ScrollLock is a content-free React component for declaratively preventing scroll bleed from modal UI to the page body. This component applies a `lockscroll` class to the `document.documentElement` and `document.scrollingElement` elements to stop the body from scrolling. When it is present, the lock is applied.

## Usage

Declare scroll locking as part of modal UI.

```jsx
import { useState } from 'react';
import { ScrollLock, Button } from '@wordpress/components';

const MyScrollLock = () => {
	const [ isScrollLocked, setIsScrollLocked ] = useState( false );

	const toggleLock = () => {
		setIsScrollLocked( ( locked ) => ! locked ) );
	};

	return (
		<div>
			<Button variant="secondary" onClick={ toggleLock }>
				Toggle scroll lock
			</Button>
			{ isScrollLocked && <ScrollLock /> }
			<p>
				Scroll locked:
				<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
			</p>
		</div>
	);
};
```