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

2.0.19 • Public • Published

react-g

react render for @antv/g

Install

npm i @antv/react-g

Usage

react-g provide host-component:

  • Container: Canvas and Group.
  • Shape: Text, Circle, Ellipse, Image, Line, Marker, Path, Polygon and Polyline.

Basic usage

import React, { useState } from 'react';
import { Canvas, Circle } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const renderer = new CanvasRenderer();

const App = () => {
    const [size, setSize] = useState(50);
    return (
        <Canvas width={600} height={400} renderer={renderer}>
            <Circle
                cx={100}
                cy={200}
                r={size}
                fill="#1890FF"
                stroke="#F04864"
                lineWidth={4}
                onClick={() => {
                    setSize(100);
                }}
            />
        </Canvas>
    );
};

export default App;

Use ref to access shape instance

Like react-dom, you can use ref to access the shape instance.

import React, { useState, useRef } from 'react';
import { Canvas, Circle } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const renderer = new CanvasRenderer();

const App = () => {
    const circleRef = useRef();
    const [size, setSize] = useState(50);
    return (
        <Canvas width={600} height={400} renderer={renderer}>
            <Circle
                ref={circleRef}
                cx={100}
                cy={200}
                r={size}
                fill="#1890FF"
                stroke="#F04864"
                lineWidth={4}
                onClick={() => {
                    setSize(100);
                }}
            />
        </Canvas>
    );
};

export default App;

render react-g component to target g element

  • 将 react-g 组件渲染到任意的 g 实例(Canvas/Group/Shape)中
  • 意味着可以将 react-g 组件渲染到 g2,g6 等其他库中
import React, { useState } from 'react';
import { Canvas as GCanvas } from '@antv/g';
import { Circle, render } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const renderer = new CanvasRenderer();

const CircleComponent = () => {
    const [size, setSize] = useState(50);
    return (
        <Circle
            cx={100}
            cy={200}
            r={size}
            fill="#1890FF"
            stroke="#F04864"
            lineWidth={4}
            onMouseenter={() => {
                setSize(100);
            }}
            onMouseleave={() => {
                setSize(50);
            }}
        />
    );
};

const canvas = new GCanvas({
    container: 'container', // DOM 节点id
    width: 600,
    height: 500,
    renderer,
});

// canvas can also be group/shape
render(<CircleComponent />, canvas);

Readme

Keywords

Package Sidebar

Install

npm i @antv/react-g

Weekly Downloads

1,094

Version

2.0.19

License

MIT

Unpacked Size

3.03 MB

Total Files

29

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