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, // g6 的Graph实例
      apis, // Graphin 提供的API接口
    } = 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 = () => {
  // 只要包裹在Graphin内的组件，都可以通过Context获得Graphin提供的graph实例和apis
  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;