How do i use this with react-cytoscape?

[SaiMun92]

Hello, I want to ask if you know how to use this extension with react-cytoscape?

Things that I have tried: I have included this in my source code but the graph is not showing d3-force behavior. cytoscape.use(d3Force);

[ThatOneBro]

Hi @SaiMun92 , not sure if you figured out your problem. I ran into the same issue and figured it out myself. You have to use it as the layout for your cytoscape.js instance:

import D3Force from 'cytoscape-d3-force';
import Cytoscape from 'cytoscape';
import CytoscapeComponent from 'react-cytoscape';

Cytoscape.use( D3Force );

const App = (props) => {
  ...
  // Create your graph from your props, etc.
  ...
  const layout = {
    name: 'd3-force',
  };
  return <CytoscapeComponent elements={myGraph} layout={layout} style={{ width: '600px', height: '600px' }} />;
};
...

Hope this is helpful.