0.1.7 • Published 10 months ago

@antv/g6-extension-react v0.1.7

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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

0.1.7

10 months ago

0.1.6

10 months ago

0.1.5

11 months ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.4

11 months ago

0.1.3

11 months ago

0.1.0

1 year ago

0.0.1

1 year ago