or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mdfill-objects.mdindex.mdpath-api.mdshape-components.md
tile.json

tessl/npm-react-art

React ART is a JavaScript library for drawing vector graphics using React

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-art@19.1.x

To install, run

npx @tessl/cli install tessl/npm-react-art@19.1.0

index.mddocs/

React ART

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.

Package Information

  • Package Name: react-art
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install react-art

Core Imports

import * as ReactART from 'react-art';
import { Surface, Text, Shape, Group, ClippingRectangle, LinearGradient, RadialGradient, Pattern, Path, Transform, version } from 'react-art';

For CommonJS:

const ReactART = require('react-art');
const { Surface, Text, Shape, Group, ClippingRectangle, LinearGradient, RadialGradient, Pattern, Path, Transform, version } = require('react-art');

Individual shape components:

import Circle from 'react-art/Circle';
import Rectangle from 'react-art/Rectangle';
import Wedge from 'react-art/Wedge';

Basic Usage

import React from 'react';
import { Surface, Group, Shape, Path } from 'react-art';

// Create a simple drawing
function MyDrawing() {
  const path = Path()
    .moveTo(0, 0)
    .lineTo(100, 0)
    .lineTo(50, 100)
    .close();

  return (
    <Surface width={200} height={200}>
      <Group>
        <Shape d={path} fill="blue" stroke="black" strokeWidth={2} />
      </Group>
    </Surface>
  );
}

Architecture

React ART is built around several key components:

  • Surface Component: Root container that creates the ART rendering surface (Canvas/SVG/VML)
  • Core Components: Basic building blocks (Shape, Group, Text, ClippingRectangle) for creating graphics
  • Shape Components: Convenience components (Circle, Rectangle, Wedge) for common shapes
  • Fill Objects: Gradient and pattern fills (LinearGradient, RadialGradient, Pattern) for advanced styling
  • Path API: Vector path construction using the ART Path class
  • Transform API: Matrix transformations for scaling, rotation, and translation

Capabilities

Core Components

Essential building blocks for creating vector graphics with React ART. Includes the Surface container, basic shapes, text rendering, and grouping functionality.

// Surface - Root container component
function Surface(props: {
  width: number;
  height: number;
  style?: object;
  className?: string;
}): JSX.Element;

// Shape - Basic vector shape component
function Shape(props: {
  d: Path;
  fill?: string | FillObject;
  stroke?: string;
  strokeWidth?: number;
}): JSX.Element;

// Group - Container for grouping shapes
function Group(props: {
  children?: React.ReactNode;
}): JSX.Element;

// Text - Text rendering component
function Text(props: {
  children: string;
  font?: string;
  fontSize?: number;
}): JSX.Element;

Core Components

Shape Components

Pre-built convenience components for common geometric shapes including circles, rectangles, and wedges/arcs.

// Circle component
function Circle(props: {
  radius: number;
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
}): JSX.Element;

// Rectangle component  
function Rectangle(props: {
  width: number;
  height: number;
  radius?: number;
  fill?: string;
  stroke?: string;
}): JSX.Element;

// Wedge component for arcs and pie charts
function Wedge(props: {
  outerRadius: number;
  startAngle: number;
  endAngle: number;
  innerRadius?: number;
  fill?: string;
}): JSX.Element;

Shape Components

Fill Objects and Styling

Advanced fill options including linear gradients, radial gradients, and image patterns for sophisticated graphics styling.

class LinearGradient {
  constructor(stops: ColorStop[], x1: number, y1: number, x2: number, y2: number);
  applyFill(node: any): void;
}

class RadialGradient {
  constructor(stops: ColorStop[], fx: number, fy: number, rx: number, ry: number, cx: number, cy: number);
  applyFill(node: any): void;
}

class Pattern {
  constructor(url: string, width: number, height: number, left: number, top: number);
  applyFill(node: any): void;
}

Fill Objects and Styling

Path API

Vector path construction using the ART Path class for creating custom shapes and complex vector graphics.

class Path {
  moveTo(x: number, y: number): Path;
  lineTo(x: number, y: number): Path;
  arc(x: number, y: number, radius: number): Path;
  close(): Path;
}

Path API

Transform API

Matrix transformation utilities from the ART library for applying scaling, rotation, and translation to graphics elements.

class Transform {
  // Matrix transformation methods
  transform(xx: number, yx: number, xy: number, yy: number, x: number, y: number): Transform;
  translate(x: number, y: number): Transform;
  scale(x: number, y?: number): Transform;
  rotate(deg: number, x?: number, y?: number): Transform;
}

Version Information

Access to the current React version for compatibility checking.

// Current React version string
const version: string;

Types

// Fill object interface - can be string color or fill object
type FillObject = LinearGradient | RadialGradient | Pattern;

// Color stop definition for gradients
interface ColorStop {
  offset: number;  // Position along gradient (0-1)
  color: string;   // Color value (hex, rgb, rgba, named colors)
}

// Transform class from ART library
class Transform {
  // ART Transform methods for matrix transformations
}