react-cytoscapejs
react-cytoscapejs copied to clipboard
How do i access cy in a function based component instead of a class based component as show in the example?
I'm using the a React.useRef
hook for that:
import React, { useRef, useCallback} from 'react';
import CytoscapeComponent from 'react-cytoscapejs';
import type cytoscape from 'cytoscape';
export interface GraphProps {
className?: string;
}
export default function Graph(props: GraphProps) {
const cy = useRef<cytoscape.Core | null>(null);
const setCytoscape = useCallback(
(ref: cytoscape.Core) => {
cy.current = ref;
},
[cy],
);
return (
<CytoscapeComponent
cy={setCytoscape}
...
/>
);
}
@sgratzl Is there a way we can do this without hooks ?
@sgratzl Is there a way we can do this without hooks ?
what do you mean? the question of this issue is how to create an functional React component and React hooks are way to go for those
I understand the question. But I am currently working in a project where I cannot use hooks. So, is there a solution where I am using class components and still can have the cy referred to the sibling components.