0
# React ART
1
2
React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library, enabling you to create complex vector graphics using React's component model while supporting output to Canvas, SVG, or VML (IE8) formats.
3
4
## Package Information
5
6
- **Package Name**: react-art
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install react-art`
10
11
## Core Imports
12
13
```javascript
14
import * as ReactART from 'react-art';
15
import { Surface, Text, Shape, Group, ClippingRectangle, LinearGradient, RadialGradient, Pattern, Path, Transform, version } from 'react-art';
16
```
17
18
For CommonJS:
19
20
```javascript
21
const ReactART = require('react-art');
22
const { Surface, Text, Shape, Group, ClippingRectangle, LinearGradient, RadialGradient, Pattern, Path, Transform, version } = require('react-art');
23
```
24
25
Individual shape components:
26
27
```javascript
28
import Circle from 'react-art/Circle';
29
import Rectangle from 'react-art/Rectangle';
30
import Wedge from 'react-art/Wedge';
31
```
32
33
## Basic Usage
34
35
```javascript
36
import React from 'react';
37
import { Surface, Group, Shape, Path } from 'react-art';
38
39
// Create a simple drawing
40
function MyDrawing() {
41
const path = Path()
42
.moveTo(0, 0)
43
.lineTo(100, 0)
44
.lineTo(50, 100)
45
.close();
46
47
return (
48
<Surface width={200} height={200}>
49
<Group>
50
<Shape d={path} fill="blue" stroke="black" strokeWidth={2} />
51
</Group>
52
</Surface>
53
);
54
}
55
```
56
57
## Architecture
58
59
React ART is built around several key components:
60
61
- **Surface Component**: Root container that creates the ART rendering surface (Canvas/SVG/VML)
62
- **Core Components**: Basic building blocks (Shape, Group, Text, ClippingRectangle) for creating graphics
63
- **Shape Components**: Convenience components (Circle, Rectangle, Wedge) for common shapes
64
- **Fill Objects**: Gradient and pattern fills (LinearGradient, RadialGradient, Pattern) for advanced styling
65
- **Path API**: Vector path construction using the ART Path class
66
- **Transform API**: Matrix transformations for scaling, rotation, and translation
67
68
## Capabilities
69
70
### Core Components
71
72
Essential building blocks for creating vector graphics with React ART. Includes the Surface container, basic shapes, text rendering, and grouping functionality.
73
74
```javascript { .api }
75
// Surface - Root container component
76
function Surface(props: {
77
width: number;
78
height: number;
79
style?: object;
80
className?: string;
81
}): JSX.Element;
82
83
// Shape - Basic vector shape component
84
function Shape(props: {
85
d: Path;
86
fill?: string | FillObject;
87
stroke?: string;
88
strokeWidth?: number;
89
}): JSX.Element;
90
91
// Group - Container for grouping shapes
92
function Group(props: {
93
children?: React.ReactNode;
94
}): JSX.Element;
95
96
// Text - Text rendering component
97
function Text(props: {
98
children: string;
99
font?: string;
100
fontSize?: number;
101
}): JSX.Element;
102
```
103
104
[Core Components](./core-components.md)
105
106
### Shape Components
107
108
Pre-built convenience components for common geometric shapes including circles, rectangles, and wedges/arcs.
109
110
```javascript { .api }
111
// Circle component
112
function Circle(props: {
113
radius: number;
114
fill?: string;
115
stroke?: string;
116
strokeWidth?: number;
117
}): JSX.Element;
118
119
// Rectangle component
120
function Rectangle(props: {
121
width: number;
122
height: number;
123
radius?: number;
124
fill?: string;
125
stroke?: string;
126
}): JSX.Element;
127
128
// Wedge component for arcs and pie charts
129
function Wedge(props: {
130
outerRadius: number;
131
startAngle: number;
132
endAngle: number;
133
innerRadius?: number;
134
fill?: string;
135
}): JSX.Element;
136
```
137
138
[Shape Components](./shape-components.md)
139
140
### Fill Objects and Styling
141
142
Advanced fill options including linear gradients, radial gradients, and image patterns for sophisticated graphics styling.
143
144
```javascript { .api }
145
class LinearGradient {
146
constructor(stops: ColorStop[], x1: number, y1: number, x2: number, y2: number);
147
applyFill(node: any): void;
148
}
149
150
class RadialGradient {
151
constructor(stops: ColorStop[], fx: number, fy: number, rx: number, ry: number, cx: number, cy: number);
152
applyFill(node: any): void;
153
}
154
155
class Pattern {
156
constructor(url: string, width: number, height: number, left: number, top: number);
157
applyFill(node: any): void;
158
}
159
```
160
161
[Fill Objects and Styling](./fill-objects.md)
162
163
### Path API
164
165
Vector path construction using the ART Path class for creating custom shapes and complex vector graphics.
166
167
```javascript { .api }
168
class Path {
169
moveTo(x: number, y: number): Path;
170
lineTo(x: number, y: number): Path;
171
arc(x: number, y: number, radius: number): Path;
172
close(): Path;
173
}
174
```
175
176
[Path API](./path-api.md)
177
178
### Transform API
179
180
Matrix transformation utilities from the ART library for applying scaling, rotation, and translation to graphics elements.
181
182
```javascript { .api }
183
class Transform {
184
// Matrix transformation methods
185
transform(xx: number, yx: number, xy: number, yy: number, x: number, y: number): Transform;
186
translate(x: number, y: number): Transform;
187
scale(x: number, y?: number): Transform;
188
rotate(deg: number, x?: number, y?: number): Transform;
189
}
190
```
191
192
### Version Information
193
194
Access to the current React version for compatibility checking.
195
196
```javascript { .api }
197
// Current React version string
198
const version: string;
199
```
200
201
## Types
202
203
```javascript { .api }
204
// Fill object interface - can be string color or fill object
205
type FillObject = LinearGradient | RadialGradient | Pattern;
206
207
// Color stop definition for gradients
208
interface ColorStop {
209
offset: number; // Position along gradient (0-1)
210
color: string; // Color value (hex, rgb, rgba, named colors)
211
}
212
213
// Transform class from ART library
214
class Transform {
215
// ART Transform methods for matrix transformations
216
}
217
```