feat(hooks): add useOnViewportChange

2022-08-10 16:01:29 +02:00
parent a5a9a60c11
commit 820cb1c880
7 changed files with 87 additions and 9 deletions
@@ -1,5 +1,5 @@
 import React, { memo, FC, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
+import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange } from '@react-flow/bundle';

 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -12,6 +12,12 @@ const sourceHandleStyleB: CSSProperties = {
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);

 const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
+  useOnViewportChange({
+    onStart: (viewport) => console.log('start', viewport),
+    onChange: (viewport) => console.log('change', viewport),
+    onEnd: (viewport) => console.log('end', viewport),
+  });
+
  return (
    <>
      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />