feat(typescript): add nodeRef to TS definitions (#494)

Addendum to #478
react-grid-layout · Jun 5, 2020 · 6de32a1 · 6de32a1
1 parent 13c96c8
commit 6de32a1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -48,6 +48,7 @@ declare module 'react-draggable' {
     offsetParent: HTMLElement,
     grid: [number, number],
     handle: string,
+    nodeRef?: React.RefObject<HTMLElement>,
     onStart: DraggableEventHandler,
     onDrag: DraggableEventHandler,
     onStop: DraggableEventHandler,

diff --git a/typings/test.tsx b/typings/test.tsx
@@ -9,6 +9,7 @@ function handleDrag() {}
 function handleStop() {}
 function handleMouseDown() {}
 
+const nodeRef = React.createRef<HTMLDivElement>();
 ReactDOM.render(
   <Draggable
     axis="y"
@@ -28,16 +29,18 @@ ReactDOM.render(
     defaultClassNameDragging={'dragging'}
     defaultClassNameDragged={'dragged'}
     defaultPosition={{x: 0, y: 0}}
+    nodeRef={nodeRef}
     positionOffset={{x: 0, y: 0}}
     position={{x: 50, y: 50}}>
-    <div className="foo bar">
+    <div className="foo bar" ref={nodeRef}>
       <div className="handle"/>
       <div className="cancel"/>
     </div>
   </Draggable>,
   root
 );
 
+const nodeRefCore = React.createRef<HTMLDivElement>();
 ReactDOM.render(
   <DraggableCore
     handle=".handle"
@@ -46,12 +49,13 @@ ReactDOM.render(
     disabled={true}
     onMouseDown={handleMouseDown}
     grid={[10, 10]}
+    nodeRef={nodeRefCore}
     onStart={handleStart}
     onDrag={handleDrag}
     onStop={handleStop}
     offsetParent={document.body}
     enableUserSelectHack={false}>
-    <div className="foo bar">
+    <div className="foo bar" ref={nodeRefCore}>
       <div className="handle"/>
       <div className="cancel"/>
     </div>