How do i access cy in a function based component instead of a class based component as show in the example? about react-cytoscapejs HOT 4 OPEN

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}
     ...
    />
  );
}

from react-cytoscapejs.

@sgratzl Is there a way we can do this without hooks ?

from react-cytoscapejs.

@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

from react-cytoscapejs.

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.

from react-cytoscapejs.