react-zrender
React Zrender adds the ability for React components to render to <canvas> or <svg> using zrender core
React Zrender Components
React Canvas provides a set of standard React components that abstract the underlying rendering implementation.
<Zrender>
Zrender is the top-level component. All the other components should be in it.
<Group>
Group is a container component. Because React enforces that all components return a single component in render()
, Groups can be useful for parenting a set of child components. The Group is also an important component for optimizing scrolling performance, as it allows the rendering engine to cache expensive drawing operations. It uses the Group
in zrender.
<Text>
Text is a flexible component that supports multi-line truncation.
<Image>
Image is exactly what you think it is.
API
getShape(string ShapeComponentName)
Returns the Shape Component. The zrender shape element should be required mannually.
;const Circle = ;
zredner shapes
- Arc
- BezierCurve
- Circle
- Droplet
- Ellipse
- Heart
- Isogon
- Line
- Polygon
- Polyline
- Rect
- Ring
- Rose
- Sector
- Star
- Trochoid
Building Components
Here is a very simple component that renders texts and circles:
const React = ;const ReactDOM = ; const Zrender Text Group getShape } = ; // support svg; ;const Circle = ; const App = React;