# @antv/g6-extension-react

> Using React Component to Define Your G6 Graph Node

Latest version **0.2.7** (published 2026-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @antv/g6-extension-react
pnpm add @antv/g6-extension-react
yarn add @antv/g6-extension-react
bun add @antv/g6-extension-react
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2026-03-30 |
| First published | 2024-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12291 |
| Author | Aarebecca |
| Maintainers | lvisei, freestyle21, soundquiet, elaine.q.10, sturuby, sakuya223, serializedowen, xdzhao, yangzhanmei, wjgogogo, leungwensen, dori, iaaron, yard, simaq, dxq613, intchous, susan_ann, jinke.li, lzxue, army8735, atool, baizn, dengfuping, neoddish, jeffy2012, zqlu, afc163, pomelo-nwu, kopiluwaky, ccnuzindex, panyuqi, bubkoo, zengyue, kasmine, boyu.zlj, l1ud0ngq1, newbyvector, winniexing, chenluli, kn9117, xdddst, semious2020, esora, nadia_liu, bbsqq, mxz96102, openwayne, pearmini, pddpd, yiqianyao, zhanba, cxxxxxn, laixingui.lxg, susiwen8, yanxiong, zeyuwang, rainy25ghz, zhangjunjie-loki, flash1, yisi.wang, dreammy23, biupiubiupiu, basketduck, xuying1027, banxuan, bqxbqxbqx, alex_zjt, duxinyue023, wang1212, leondt1, gaofuhong |
| Keywords | antv, g6, extension, react, node |

## Links

- npm: https://www.npmjs.com/package/@antv/g6-extension-react
- Repository: https://github.com/antvis/G6
- Homepage: https://github.com/antvis/G6#readme
- Issues: https://github.com/antvis/G6/issues
- npm.io page: https://npm.io/package/@antv/g6-extension-react

## Dependencies (2)

- [@antv/g](https://npm.io/package/@antv/g.md) ^6.1.24
- [@antv/g-svg](https://npm.io/package/@antv/g-svg.md) ^2.0.38

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.7 (latest) — 2026-03-30
- 0.1.12-beta.1 (beta) — 2024-12-19
- 0.2.6 — 2025-10-16
- 0.2.5 — 2025-10-16
- 0.2.4 — 2025-06-26
- 0.2.3 — 2025-05-16
- 0.2.2 — 2025-05-13
- 0.2.1 — 2025-04-09
- 0.2.0 — 2025-03-11
- 0.1.19 — 2025-03-04
- 0.1.18 — 2025-02-14
- 0.1.17 — 2025-01-09
- 0.1.16 — 2025-01-08
- 0.1.15 — 2025-01-03
- 0.1.14 — 2024-12-23
- … 15 more at https://npm.io/package/@antv/g6-extension-react/versions

## README

## React extension for G6

<img width="500" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rWSiT6dnwfcAAAAAAAAAAAAADmJ7AQ/original" />

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

## Usage

1. Install

```bash
npm install @antv/g6-extension-react
```

2. Import and Register

```js
import { ExtensionCategory, register } from '@antv/g6';
import { ReactNode } from '@antv/g6-extension-react';

register(ExtensionCategory.NODE, 'react', ReactNode);
```

3. Define Node

React Node:

```jsx
const ReactNode = () => {
  return <div>node</div>;
};
```

G Node:

```jsx
import { Group, Rect, Text } from '@antv/g6-extension-react';

const GNode = () => {
  return <Group>
    <Rect width={100} height={100}></Rect>
    <Text text={"node"} />
  <Group>
};
```

4. Use

Use ReactNode:

```jsx
const graph = new Graph({
  // ... other options
  node: {
    type: 'react',
    style: {
      component: () => <ReactNode />,
    },
  },
});
```

Use GNode:

```jsx
const graph = new Graph({
  // ... other options
  node: {
    type: 'g',
    style: {
      component: () => <GNode />,
    },
  },
});
```

## 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

- [React node](https://g6.antv.antgroup.com/examples/element/custom-node/#react-node)
- [G node with JSX syntax](https://g6.antv.antgroup.com/en/examples/element/custom-node/#react-g)

---
_Source: https://npm.io/package/@antv/g6-extension-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._