41 lines
947 B
TypeScript
41 lines
947 B
TypeScript
import { createContext, useContext } from 'react';
|
|
|
|
export const NodeIdContext = createContext<string | null>(null);
|
|
export const Provider = NodeIdContext.Provider;
|
|
export const Consumer = NodeIdContext.Consumer;
|
|
|
|
/**
|
|
* You can use this hook to get the id of the node it is used inside. It is useful
|
|
* if you need the node's id deeper in the render tree but don't want to manually
|
|
* drill down the id as a prop.
|
|
*
|
|
* @public
|
|
* @returns id of the node
|
|
*
|
|
* @example
|
|
*```jsx
|
|
*import { useNodeId } from '@xyflow/react';
|
|
*
|
|
*export default function CustomNode() {
|
|
* return (
|
|
* <div>
|
|
* <span>This node has an id of </span>
|
|
* <NodeIdDisplay />
|
|
* </div>
|
|
* );
|
|
*}
|
|
*
|
|
*function NodeIdDisplay() {
|
|
* const nodeId = useNodeId();
|
|
*
|
|
* return <span>{nodeId}</span>;
|
|
*}
|
|
*```
|
|
*/
|
|
export const useNodeId = (): string | null => {
|
|
const nodeId = useContext(NodeIdContext);
|
|
return nodeId;
|
|
};
|
|
|
|
export default NodeIdContext;
|