Documentation tweaks

clauderic · Jan 28, 2025 · 1801b6e · 1801b6e
1 parent 7f9e94f
commit 1801b6e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/apps/docs/extend/modifiers.mdx b/apps/docs/extend/modifiers.mdx
@@ -33,7 +33,7 @@ function App() {
 
 Modifiers can also be applied to individual [draggable](/concepts/draggable) elements by passing them to the `modifiers` option.
 
-For example, if you wanted to only enable the `RestrictToContainer` modifier for this specific draggable element, while using the `RestrictToHorizontalAxis` globally for all other draggable elements:
+For example, if you wanted to only enable the `RestrictToElement` modifier for this specific draggable element, while using the `RestrictToHorizontalAxis` globally for all other draggable elements:
 
 ```js
 import {Draggable} from '@dnd-kit/dom';
@@ -45,7 +45,8 @@ function App() {
 
   const draggable = new Draggable({
     id: 'draggable',
-    modifiers: [RestrictToContainer],
+    element,
+    modifiers: [RestrictToElement.configure({element: element.parentElement})],
   }, manager);
 }
 ```
@@ -76,7 +77,7 @@ These modifiers can be imported from `@dnd-kit/dom/modifiers`.
   Restricts the movement of draggable elements to the window.
 </ResponseField>
 
-<ResponseField name="RestrictToContainer">
+<ResponseField name="RestrictToElement">
   Restricts the movement of draggable elements to the container element.
 </ResponseField>
 

diff --git a/apps/docs/overview.mdx b/apps/docs/overview.mdx
@@ -7,6 +7,7 @@ description: 'Learn how to build drag and drop interfaces with <span class="inli
   className="block hero-image"
   src="/images/hero.svg"
   alt="A modular toolkit for building drag and drop interfaces"
+  noZoom
 />
 
 ## Getting started

diff --git a/apps/docs/react/hooks/use-draggable.mdx b/apps/docs/react/hooks/use-draggable.mdx
@@ -148,12 +148,12 @@ And here is an example of how to restrict dragging to the container element of t
 
 ```jsx
 import {useDraggable} from '@dnd-kit/react';
-import {RestrictToContainer} from '@dnd-kit/dom/modifiers';
+import {RestrictToElement} from '@dnd-kit/dom/modifiers';
 
 function Draggable({id}) {
   const {ref} = useDraggable({
     id,
-    modifiers: [RestrictToContainer],
+    modifiers: [RestrictToElement.configure({element: document.body})],
   });
 }
 ```