@antv/g6-extension-react
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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

Package Sidebar

Install

npm i @antv/g6-extension-react

Weekly Downloads

52

Version

0.1.2

License

MIT

Unpacked Size

1.68 MB

Total Files

76

Last publish

Collaborators

  • banxuan
  • xuying1027
  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • 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