Graphin

import React from 'react';
import Graphin, { Utils } from '@antv/graphin';

const data = Utils.mock(10)
  .circle()
  .graphin();

const Demo = () => {
  const graphinRef = React.createRef();

  React.useEffect(() => {
    const {
      graph, // Graph instance of g6
      apis, // API interface provided by Graphin
    } = graphinRef.current;
    console.log('ref', graphinRef, graph, apis);
  }, []);

  return (
    <div className="App">
      <Graphin data={data} ref={graphinRef}></Graphin>
    </div>
  );
};
export default Demo;

import React from 'react';
import Graphin, { Utils, GraphinContext } from '@antv/graphin';

const data = Utils.mock(10)
  .circle()
  .graphin();

const CustomComponents = () => {
  // As long as the components wrapped in Graphin, you can obtain graph instances and apis provided by Graphin through Context
  const { graph, apis } = React.useContext(GraphinContext);
  return null;
};

const Demo = () => {
  return (
    <div className="App">
      <Graphin data={data} ref={graphinRef}>
        <CustomComponents />
      </Graphin>
    </div>
  );
};
export default Demo;