@antv/react-g
react render for @antv/g
Last updated 10 months ago
by panyuqi
.
MIT
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ npm install @antv/react-g
SYNC missed versions from
official npm registry.
react-g
react render for @antv/g
Install
npm i @antv/react-g
Usage
react-g provide host-component:
- Container:
CanvasandGroup. - Shape:
Text,Circle,Ellipse,Image,Line,Marker,Path,PolygonandPolyline.
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);
Current Tags
- 2.0.16-alpha.0 ... alpha (25 days ago)
- 1.9.0-beta.1 ... beta (a year ago)
- 2.0.24 ... latest (20 hours ago)
- 2.0.15 ... next (2 months ago)
226 Versions
- 2.0.24 ... 20 hours ago
- 2.0.23 ... 8 days ago
- 2.0.22 ... 10 days ago
- 2.0.21 ... 11 days ago
- 2.0.20 ... 14 days ago
- 2.0.19 ... 22 days ago
- 2.0.18 ... 23 days ago
- 2.0.17 ... 23 days ago
- 2.0.16 ... 24 days ago
- 2.0.16-alpha.0 ... 25 days ago
- 2.0.15 ... 2 months ago
- 2.0.14 ... 3 months ago
- 2.0.13 ... 3 months ago
- 2.0.12 ... 3 months ago
- 2.0.11 ... 4 months ago
- 2.0.10 ... 4 months ago
- 2.0.9 ... 4 months ago
- 2.0.8 ... 4 months ago
- 2.0.7 ... 5 months ago
- 2.0.6 ... 6 months ago
- 2.0.5 ... 6 months ago
- 2.0.4 ... 6 months ago
- 2.0.3 ... 7 months ago
- 2.0.2 ... 8 months ago
- 2.0.1 ... 8 months ago
- 2.0.0 ... 8 months ago
- 1.10.28 ... 8 months ago
- 1.10.27 ... 8 months ago
- 1.10.26-next.20 ... 8 months ago
- 1.10.26-next.19 ... 8 months ago
- 1.10.26-next.18 ... 8 months ago
- 1.10.26-next.17 ... 8 months ago
- 1.10.26-next.16 ... 8 months ago
- 1.10.26-next.15 ... 8 months ago
- 1.10.26-next.14 ... 8 months ago
- 1.10.26 ... 9 months ago
- 1.10.26-next.13 ... 9 months ago
- 1.10.26-next.12 ... 9 months ago
- 1.10.26-next.11 ... 9 months ago
- 1.10.26-next.10 ... 9 months ago
- 1.10.26-next.9 ... 9 months ago
- 1.10.26-next.8 ... 10 months ago
- 1.10.26-next.7 ... 10 months ago
- 1.10.26-next.6 ... 10 months ago
- 1.10.26-next.4 ... 10 months ago
- 1.10.26-next.3 ... 10 months ago
- 1.10.26-next.2 ... 10 months ago
- 1.10.26-next.1 ... 10 months ago
- 1.10.26-next.0 ... 10 months ago
- 1.10.25 ... 10 months ago
- 1.10.24 ... a year ago
- 1.10.23 ... a year ago
- 1.10.22 ... a year ago
- 1.10.21 ... a year ago
- 1.10.20 ... a year ago
- 1.10.19 ... a year ago
- 1.10.18 ... a year ago
- 1.10.17 ... a year ago
- 1.10.16 ... a year ago
- 1.10.15 ... a year ago
- 1.10.14 ... a year ago
- 1.10.13 ... a year ago
- 1.10.12 ... a year ago
- 1.10.11 ... a year ago
- 1.10.9 ... a year ago
- 1.10.8 ... a year ago
- 1.10.7 ... a year ago
- 1.10.6 ... a year ago
- 1.10.5 ... a year ago
- 1.10.4 ... a year ago
- 1.10.3 ... a year ago
- 1.10.2 ... a year ago
- 1.10.1 ... a year ago
- 1.10.0 ... a year ago
- 1.9.0 ... a year ago
- 1.9.0-beta.1 ... a year ago
- 1.9.0-alpha.1 ... a year ago
- 1.8.79 ... a year ago
- 1.8.78 ... a year ago
- 1.8.77 ... a year ago
- 1.8.76 ... a year ago
- 1.8.75 ... a year ago
- 1.8.74 ... a year ago
- 1.8.73 ... a year ago
- 1.8.72 ... a year ago
- 1.8.71 ... a year ago
- 1.8.70 ... a year ago
- 1.8.69 ... a year ago
- 1.8.68 ... a year ago
- 1.8.67 ... 2 years ago
- 1.8.66 ... 2 years ago
- 1.8.65 ... 2 years ago
- 1.8.64 ... 2 years ago
- 1.8.63 ... 2 years ago
- 1.8.62 ... 2 years ago
- 1.8.61 ... 2 years ago
- 1.8.60 ... 2 years ago
- 1.8.59 ... 2 years ago
- 1.8.58 ... 2 years ago
- 1.8.57 ... 2 years ago
- 1.8.56 ... 2 years ago
- 1.8.55 ... 2 years ago
- 1.8.54 ... 2 years ago
- 1.8.53 ... 2 years ago
- 1.8.52 ... 2 years ago
- 1.8.51 ... 2 years ago
- 1.8.50 ... 2 years ago
- 1.8.49 ... 2 years ago
- 1.8.48 ... 2 years ago
- 1.8.47 ... 2 years ago
- 1.8.46 ... 2 years ago
- 1.8.45 ... 2 years ago
- 1.8.43 ... 2 years ago
- 1.8.42 ... 2 years ago
- 1.8.41 ... 2 years ago
- 1.8.40 ... 2 years ago
- 1.8.39 ... 2 years ago
- 1.8.38 ... 2 years ago
- 1.8.37 ... 2 years ago
- 1.8.37-alpha.0 ... 2 years ago
- 1.8.36 ... 2 years ago
- 1.8.35 ... 2 years ago
- 1.8.34 ... 2 years ago
- 1.8.33 ... 2 years ago
- 1.8.32 ... 2 years ago
- 1.8.31 ... 2 years ago
- 1.8.30 ... 2 years ago
- 1.8.29 ... 2 years ago
- 1.8.28 ... 2 years ago
- 1.8.27 ... 2 years ago
- 1.8.26 ... 2 years ago
- 1.8.25 ... 2 years ago
- 1.8.24 ... 2 years ago
- 1.8.23 ... 2 years ago
- 1.8.22 ... 2 years ago
- 1.8.21 ... 2 years ago
- 1.8.20 ... 2 years ago
- 1.8.19 ... 2 years ago
- 1.8.18 ... 2 years ago
- 1.8.17 ... 2 years ago
- 1.8.16 ... 2 years ago
- 1.8.15 ... 2 years ago
- 1.8.14 ... 2 years ago
- 1.8.13 ... 2 years ago
- 1.8.12 ... 2 years ago
- 1.8.11 ... 2 years ago
- 1.8.10 ... 2 years ago
- 1.8.9 ... 2 years ago
- 1.8.8 ... 2 years ago
- 1.8.7 ... 2 years ago
- 1.8.6 ... 2 years ago
- 1.8.5 ... 2 years ago
- 1.8.4 ... 2 years ago
- 1.8.3 ... 2 years ago
- 1.8.2 ... 2 years ago
- 1.8.1 ... 2 years ago
- 1.8.0 ... 2 years ago
- 1.7.6 ... 2 years ago
- 1.7.5 ... 2 years ago
- 1.7.4 ... 2 years ago
- 1.7.3 ... 2 years ago
- 1.7.2 ... 2 years ago
- 1.7.1 ... 2 years ago
- 1.7.0 ... 2 years ago
- 1.6.4 ... 2 years ago
- 1.6.3 ... 2 years ago
- 1.6.2 ... 2 years ago
- 1.6.1 ... 2 years ago
- 1.6.0 ... 2 years ago
- 1.6.0-alpha.0 ... 2 years ago
- 1.5.3 ... 2 years ago
- 1.5.2 ... 2 years ago
- 1.5.1 ... 2 years ago
- 1.5.0 ... 2 years ago
- 1.4.0 ... 2 years ago
- 1.3.1 ... 2 years ago
- 1.3.0 ... 2 years ago
- 1.2.3 ... 2 years ago
- 1.2.2 ... 2 years ago
- 1.2.1 ... 2 years ago
- 1.2.0 ... 2 years ago
- 1.1.8 ... 2 years ago
- 1.1.8-alpha.1 ... 2 years ago
- 1.1.8-alpha.0 ... 2 years ago
- 1.1.7 ... 2 years ago
- 1.1.6 ... 2 years ago
- 1.1.5 ... 2 years ago
- 1.1.4 ... 2 years ago
- 1.1.3 ... 2 years ago
- 1.1.3-alpha.1 ... 2 years ago
- 1.1.3-alpha.0 ... 2 years ago
- 1.1.2 ... 2 years ago
- 1.1.1 ... 2 years ago
- 1.1.0 ... 2 years ago
- 1.0.17 ... 3 years ago
- 1.0.16 ... 3 years ago
- 1.0.16-alpha.16 ... 3 years ago
- 1.0.16-alpha.15 ... 3 years ago
- 1.0.16-alpha.14 ... 3 years ago
- 1.0.16-alpha.13 ... 3 years ago
- 1.0.16-alpha.12 ... 3 years ago
- 1.0.16-alpha.11 ... 3 years ago
- 1.0.16-alpha.10 ... 3 years ago
- 1.0.16-alpha.9 ... 3 years ago
- 1.0.16-alpha.8 ... 3 years ago
- 1.0.16-alpha.7 ... 3 years ago
- 1.0.16-alpha.6 ... 3 years ago
- 1.0.16-alpha.4 ... 3 years ago
- 1.0.16-alpha.2 ... 3 years ago
- 1.0.16-alpha.0 ... 3 years ago
- 1.0.15 ... 3 years ago
- 1.0.15-alpha.2 ... 3 years ago
- 1.0.15-alpha.1 ... 3 years ago
- 1.0.15-alpha.0 ... 3 years ago
- 1.0.14 ... 3 years ago
- 1.0.12 ... 3 years ago
- 1.0.11 ... 3 years ago
- 1.0.9 ... 3 years ago
- 1.0.8 ... 3 years ago
- 1.0.7 ... 3 years ago
- 1.0.6 ... 3 years ago
- 1.0.5 ... 3 years ago
- 1.0.4 ... 3 years ago
- 1.0.3 ... 3 years ago
- 1.0.2 ... 3 years ago
- 1.0.1 ... 3 years ago
Maintainers (66)
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
Downloads
Total
0
Today
0
This Week
0
This Month
0
Last Day
0
Last Week
0
Last Month
0
Dependencies (6)
- tslib ^2.5.3
- @antv/g 5.18.25-next.0
- gl-matrix ^3.4.3
- scheduler ^0.20.2
- @antv/util ^3.3.4
- react-reconciler ^0.26.2
Dev Dependencies (4)
- @types/node ^17.0.0
- @types/react ^16.9.32
- @types/scheduler ^0.16.0
- @types/react-reconciler ^0.26.0
Dependents (1)