Add prop to not add body styles, update readme

README.md

@@ -71,6 +71,10 @@ Additional props:
 
 `disablePreventScroll`: When `true` scroll prevention mechanism will be disabled. Scroll prevention ensures that page will not scroll on mobile when opening drawer. However this mechanism gets confused when drawer has an input with autofocus and therefore opens simulataneosly with touch keyboard. Defaults to `true`. `modal` set to `false` also disables it.
 
+`noBodyStyles`: When `true` the `body` doesn't get any styles assigned from Vaul.
+
+`setBackgroundColorOnScale`: When `false` we don't change body's background color when the drawer is open. `true` by default.
+
 `[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.
 
 ### Trigger

src/index.tsx

@@ -40,6 +40,7 @@ type DialogProps = {
   children?: React.ReactNode;
   open?: boolean;
   closeThreshold?: number;
+  noBodyStyles?: boolean;
   onOpenChange?: (open: boolean) => void;
   shouldScaleBackground?: boolean;
   setBackgroundColorOnScale?: boolean;
@@ -77,6 +78,7 @@ function Root({
   fixed,
   modal = true,
   onClose,
+  noBodyStyles,
   direction = 'bottom',
   preventScrollRestoration = true,
   disablePreventScroll = false,
@@ -137,6 +139,7 @@ function Root({
     nested,
     hasBeenOpened,
     preventScrollRestoration,
+	noBodyStyles
   });
 
   function getScale() {
@@ -614,18 +617,20 @@ function Root({
 
     if (open) {
       if (setBackgroundColorOnScale) {
-        // setting original styles initially
-        set(document.body, {
-          background: document.body.style.backgroundColor || document.body.style.background,
-        });
-        // setting body styles, with cache ignored, so that we can get correct original styles in reset
-        set(
-          document.body,
-          {
-            background: 'black',
-          },
-          true,
-        );
+        if (!noBodyStyles) {
+          // setting original styles initially
+          set(document.body, {
+            background: document.body.style.backgroundColor || document.body.style.background,
+          });
+          // setting body styles, with cache ignored, so that we can get correct original styles in reset
+          set(
+            document.body,
+            {
+              background: 'black',
+            },
+            true,
+          );
+        }
       }
 
       set(wrapper, {

src/use-position-fixed.ts

@@ -8,19 +8,21 @@ export function usePositionFixed({
   nested,
   hasBeenOpened,
   preventScrollRestoration,
+  noBodyStyles,
 }: {
   isOpen: boolean;
   modal: boolean;
   nested: boolean;
   hasBeenOpened: boolean;
   preventScrollRestoration: boolean;
+  noBodyStyles: boolean;
 }) {
   const [activeUrl, setActiveUrl] = React.useState(() => (typeof window !== 'undefined' ? window.location.href : ''));
   const scrollPos = React.useRef(0);
 
   const setPositionFixed = React.useCallback(() => {
     // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === null && isOpen) {
+    if (previousBodyPosition === null && isOpen && !noBodyStyles) {
       previousBodyPosition = {
         position: document.body.style.position,
         top: document.body.style.top,
@@ -56,7 +58,7 @@ export function usePositionFixed({
   }, [isOpen]);
 
   const restorePositionSetting = React.useCallback(() => {
-    if (previousBodyPosition !== null) {
+    if (previousBodyPosition !== null && !noBodyStyles) {
       // Convert the position from "px" to Int
       const y = -parseInt(document.body.style.top, 10);
       const x = -parseInt(document.body.style.left, 10);