mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 03:38:20 +08:00
8dc9e587cc
Co-authored-by: antv <antv@antfin.com> |
||
---|---|---|
.. | ||
__tests__ | ||
src | ||
CHANGELOG.md | ||
jest.config.js | ||
package.json | ||
README.md | ||
rollup.config.mjs | ||
tsconfig.build.json | ||
tsconfig.json | ||
tsconfig.test.json | ||
vite.config.js |
React extension for G6
This extension allows you to define G6 node by React component and JSX syntax.
Usage
- Install
npm install @antv/g6-extension-react
- Import and Register
import { ExtensionCategory, register } from '@antv/g6';
import { ReactNode, GNode } from '@antv/g6-extension-react';
register(ExtensionCategory.NODE, 'react', ReactNode);
register(ExtensionCategory.NODE, 'g', GNode);
- Define Node
React Node:
const ReactNode = () => {
return <div>node</div>;
};
G Node:
import { Group, Rect, Text } from '@antv/g6-extension-react';
const GNode = () => {
return <Group>
<Rect width={100} height={100}></Rect>
<Text text={"node"} />
<Group>
};
- Use
Use ReactNode:
const graph = new Graph({
// ... other options
node: {
type: 'react',
style: {
component: () => <GNode />,
},
},
});
Use GNode:
const graph = new Graph({
// ... other options
node: {
type: 'g',
style: {
component: () => <ReactNode />,
},
},
});
Q&A
- Difference between ReactNode and GNode
ReactNode is a React component, while GNode support jsx syntax but can only use G tag node.