### Using RemoveScroll with Sidecar for Optimized Loading
Source: https://github.com/thekashey/react-remove-scroll/blob/master/README.md
Illustrates how to use the `sidecar` utility with `RemoveScroll` to load the main logic asynchronously, optimizing bundle size by separating UI components from side effects.
```js
import {sidecar} from "react-remove-scroll";
import {RemoveScroll} from 'react-remove-scroll/UI';
const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));
Will load logic from a sidecar when needed
```
--------------------------------
### RemoveScroll Component Props API
Source: https://github.com/thekashey/react-remove-scroll/blob/master/README.md
Details the various props accepted by the `RemoveScroll` component, explaining their purpose, default values, and potential side effects or usage considerations.
```APIDOC
RemoveScroll Props:
children: ReactNode
enabled: boolean (optional, default: true)
description: Activates or deactivates component behavior without unmounting.
allowPinchZoom: boolean (optional, default: false)
description: Enables "pinch-n-zoom" behavior. By default, it might be prevented. Note: pinch and zoom might break "scroll isolation" and is disabled by default.
noRelative: boolean (optional, default: false)
description: Prevents setting `position: relative` on the body.
noIsolation: boolean (optional, default: false)
description: Disables outer event capturing. Event capturing is React friendly and unlikely to be a problem, but if using a shadowbox, it might not be needed.
inert: boolean (optional, default: false)
description: (Use with caution) Disables events for the rest of the page completely using `pointer-events` except the Lock (+shards). Not React portals friendly, might lead to production issues. Enable only for rare cases when scrollbars need to be disabled elsewhere on the page (except body, Lock, and shards).
forwardProps: boolean (optional)
description: Forwards all props to the `children` element.
className: string (optional)
description: CSS class name for the internal `div` created by the component.
removeScrollBar: boolean (optional, default: true)
description: Controls scroll bar removal. Set to `false` to keep the scrollbar visible (wheel and touch scroll will still be disabled).
```
--------------------------------
### Basic Usage of RemoveScroll Component
Source: https://github.com/thekashey/react-remove-scroll/blob/master/README.md
Demonstrates the fundamental way to use `react-remove-scroll` by wrapping content with the `RemoveScroll` component to restrict scrolling to only the wrapped children.
```js
import {RemoveScroll} from 'react-remove-scroll';
Only this content would be scrollable
```
--------------------------------
### Customizing Internal Div or Forwarding Props
Source: https://github.com/thekashey/react-remove-scroll/blob/master/README.md
Shows two equivalent ways to apply a `className` to the internal `div` created by `RemoveScroll`: either directly via the `className` prop or by using `forwardProps` to inject props into a child element.
```js
Only this content would be scrollable
```
```js
//RemoveScroll will inject props to this div
Only this content would be scrollable
```
--------------------------------
### Reset Body Margin to Zero (CSS)
Source: https://github.com/thekashey/react-remove-scroll/blob/master/example/index.html
This CSS snippet demonstrates how to set the margin of the element to zero. This is a common practice to remove default browser-applied margins, ensuring content aligns directly with the viewport edges.
```CSS
body { margin: 0; }
```
--------------------------------
### Adjusting Position Fixed Elements with RemoveScroll
Source: https://github.com/thekashey/react-remove-scroll/blob/master/README.md
Explains how to correctly size and position `position:fixed` elements when `RemoveScroll` is active by applying special class names provided by the component, ensuring they adapt to scrollbar removal.
```jsx
import {RemoveScroll} from 'react-remove-scroll';
// to make "width: 100%"
// to make "right:0"
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.