# react-zrender

> edp project

Latest version **0.0.1** (published 2016-02-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-zrender
pnpm add react-zrender
yarn add react-zrender
bun add react-zrender
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2016-02-19 |
| First published | 2016-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | cxtom |
| Maintainers | cxtom |
| Keywords | react, zrender, canvas, svg |

## Links

- npm: https://www.npmjs.com/package/react-zrender
- Repository: empty
- npm.io page: https://npm.io/package/react-zrender

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^0.14.7
- [zrender](https://npm.io/package/zrender.md) ^3.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2016-02-19

## README

# react-zrender

React Zrender adds the ability for React components to render to <canvas> or <svg> using [zrender](https://github.com/ecomfe/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.

```javascript
require('zrender/graphic/shape/Circle');
const Circle = getShape('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:

```javascript


const React = require('react');
const ReactDOM = require('react-dom');

const {
    Zrender,
    Text,
    Group,
    getShape
} = require('../../src/main');

// support svg
require('zrender/svg/svg');

require('zrender/graphic/shape/Circle');
const Circle = getShape('Circle');

const App = React.createClass({

    render() {

        return (
            <Zrender
                renderer="canvas"
                width={500}
                height={300}>
                <Text
                    style={{
                        fill: '#000',
                        font: '18px Arial',
                        textFont: '18px Arial',
                        x: 100,
                        y: 100
                    }}>
                    hello
                </Text>
                <Group>
                    <Circle
                        ref="circle"
                        shape={{
                            cx: 250,
                            cy: 150,
                            r: 20
                        }}
                        style={{
                            stroke: '#000',
                            fill: 'transparent'
                        }} />
                        <Group>
                            <Circle
                                shape={{
                                    cx: 300,
                                    cy: 150,
                                    r: 30
                                }}
                                style={{
                                    stroke: '#000',
                                    fill: 'transparent'
                                }} />
                        </Group>
                </Group>
            </Zrender>
        );
    }
});

```

---
_Source: https://npm.io/package/react-zrender · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._