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
```