G6 V5 Use React about g6 HOT 5 CLOSED

I noticed that the Demo you provided is not using G6 5.0 (but rather ^4.5.5). If you want to use the 4.x version in React, you can refer to g6-in-react (please note that the code might be outdated).

If you want to use the 5.x version in React, you can visit the latest Demo. Please note that the relevant documentation is expected to be updated on the official website by the end of this weekend.

from g6.

@RackweLLizm

The current official website provides incorrect examples, so please do not refer to the sample code provided there. We will prioritize updating the documentation and examples as soon as possible within this week. Thank you for your understanding and patience.

After the beta.28 version, G6 underwent a significant change. You can now use it in the following way:

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 400,
  data: {
    nodes: [{ id: 'node-1' }, { id: 'node-2' }],
    edges: [{ source: 'node-1', target: 'node-2' }],
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
  layout: {
    type: 'grid',
  },
});

graph.render();

The use of extend to add extensions has been deprecated, and instead, a register method similar to that in version 4.x is now adopted. Currently, all plugins are registered by default, but after future adjustments, you may need to register them in the following way:

import { register, ExtensionCategory, Donut } from '@antv/g6';

register(ExtensionCategory.NODE, 'donut', Donut);

from g6.

I noticed that the Demo you provided is not using G6 5.0 (but rather ^4.5.5). If you want to use the 4.x version in React, you can refer to g6-in-react (please note that the code might be outdated).

If you want to use the 5.x version in React, you can visit the latest Demo. Please note that the relevant documentation is expected to be updated on the official website by the end of this weekend.

Yes, that's what I was looking for, it worked, thank you.

from g6.

@Aarebecca

https://g6-next.antv.antgroup.com/en/examples/feature/features/#moreDataWebGL
When I try to implement the example in the link
import { Graph, Extensions, extend } from '@antv/g6';
'"@antv/g6"' has no exported member named 'Extensions'. Did you mean 'getExtensions'?ts(2724)
Module '"@antv/g6"' has no exported member 'extend'.ts(2305)

I'm getting the error. You said above that the examples will be updated. Do I have to wait a bit or is it my fault?

Package.Json:
"@antv/g6": "^5.0.0-beta.35",

from g6.

You can use G6 in react with this package. https://www.npmjs.com/package/react-g6

from g6.