g6/packages/g6-extension-react
Aaron 8dc9e587cc
chore: update version (#6231)
Co-authored-by: antv <antv@antfin.com>
2024-08-22 21:00:15 +08:00
..
__tests__ fix: when update styles of node, it's react node does't update. (#6208) 2024-08-22 19:15:31 +08:00
src fix: when update styles of node, it's react node does't update. (#6208) 2024-08-22 19:15:31 +08:00
CHANGELOG.md chore: update version (#6231) 2024-08-22 21:00:15 +08:00
jest.config.js feat: add HTML node, g node, react node (#5654) 2024-04-18 10:05:05 +08:00
package.json chore: update version (#6231) 2024-08-22 21:00:15 +08:00
README.md docs: update README (#5927) 2024-06-25 13:57:19 +08:00
rollup.config.mjs chore: adjust umd name (#5668) 2024-04-22 18:17:44 +08:00
tsconfig.build.json feat: add HTML node, g node, react node (#5654) 2024-04-18 10:05:05 +08:00
tsconfig.json feat: add HTML node, g node, react node (#5654) 2024-04-18 10:05:05 +08:00
tsconfig.test.json feat: add HTML node, g node, react node (#5654) 2024-04-18 10:05:05 +08:00
vite.config.js feat: add HTML node, g node, react node (#5654) 2024-04-18 10:05:05 +08:00

React extension for G6

This extension allows you to define G6 node by React component and JSX syntax.

Usage

  1. Install
npm install @antv/g6-extension-react
  1. 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);
  1. 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>
};
  1. 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

  1. Difference between ReactNode and GNode

ReactNode is a React component, while GNode support jsx syntax but can only use G tag node.

Resources