tessl/npm-react-art

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Shape Components

Name: tessl/npm-react-art
Author: tessl

Pre-built convenience components for common geometric shapes including circles, rectangles, and wedges/arcs. These components provide an easier way to create common shapes without manually constructing paths.

Capabilities

Circle Component

Pre-built circular shape component that creates perfect circles with a specified radius.

/**
 * Circle component for drawing circles
 * Creates a circular path with the specified radius
 * @param props - Circle configuration and styling
 * @returns JSX.Element
 */
function Circle(props: {
  /** Radius of the circle in pixels */
  radius: number;
  /** Fill color (string) or fill object (gradient/pattern) */
  fill?: string | FillObject;
  /** Stroke color */
  stroke?: string;
  /** Stroke width in pixels */
  strokeWidth?: number;
  /** Stroke dash pattern */
  strokeDash?: number[];
  /** Stroke line cap style */
  strokeCap?: 'butt' | 'round' | 'square';
  /** Stroke line join style */
  strokeJoin?: 'miter' | 'round' | 'bevel';
  /** Opacity (0-1) */
  opacity?: number;
}): JSX.Element;

Usage Examples:

import React from 'react';
import { Surface } from 'react-art';
import Circle from 'react-art/Circle';

// Basic circle
function BasicCircle() {
  return (
    <Surface width={100} height={100}>
      <Circle 
        radius={40} 
        fill="blue" 
        stroke="darkblue" 
        strokeWidth={2}
      />
    </Surface>
  );
}

// Multiple circles
function MultipleCircles() {
  return (
    <Surface width={200} height={100}>
      <Circle radius={30} fill="red" />
      <Circle radius={20} fill="green" />
      <Circle radius={10} fill="blue" />
    </Surface>
  );
}

Rectangle Component

Pre-built rectangular shape component with support for rounded corners through radius properties.

/**
 * Rectangle component for drawing rectangles and rounded rectangles
 * Creates rectangular paths with optional rounded corners
 * @param props - Rectangle configuration and styling
 * @returns JSX.Element
 */
function Rectangle(props: {
  /** Width of the rectangle in pixels */
  width: number;
  /** Height of the rectangle in pixels */
  height: number;
  /** Border radius for all corners (shorthand) */
  radius?: number;
  /** Border radius for top-left corner */
  radiusTopLeft?: number;
  /** Border radius for top-right corner */
  radiusTopRight?: number;
  /** Border radius for bottom-left corner */
  radiusBottomLeft?: number;
  /** Border radius for bottom-right corner */
  radiusBottomRight?: number;
  /** Fill color (string) or fill object (gradient/pattern) */
  fill?: string | FillObject;
  /** Stroke color */
  stroke?: string;
  /** Stroke width in pixels */
  strokeWidth?: number;
  /** Stroke dash pattern */
  strokeDash?: number[];
  /** Stroke line cap style */
  strokeCap?: 'butt' | 'round' | 'square';
  /** Stroke line join style */
  strokeJoin?: 'miter' | 'round' | 'bevel';
  /** Opacity (0-1) */
  opacity?: number;
}): JSX.Element;

Usage Examples:

import React from 'react';
import { Surface } from 'react-art';
import Rectangle from 'react-art/Rectangle';

// Basic rectangle
function BasicRectangle() {
  return (
    <Surface width={150} height={100}>
      <Rectangle 
        width={100} 
        height={60} 
        fill="green" 
        stroke="darkgreen" 
        strokeWidth={2}
      />
    </Surface>
  );
}

// Rounded rectangle
function RoundedRectangle() {
  return (
    <Surface width={150} height={100}>
      <Rectangle 
        width={100} 
        height={60} 
        radius={10}
        fill="orange" 
        stroke="darkorange" 
        strokeWidth={2}
      />
    </Surface>
  );
}

// Rectangle with individual corner radii
function CustomRoundedRectangle() {
  return (
    <Surface width={150} height={100}>
      <Rectangle 
        width={100} 
        height={60} 
        radiusTopLeft={20}
        radiusTopRight={5}
        radiusBottomLeft={5}
        radiusBottomRight={20}
        fill="purple" 
      />
    </Surface>
  );
}

// Handling negative dimensions
function FlexibleRectangle() {
  // Rectangle handles negative width/height by offsetting position
  return (
    <Surface width={150} height={100}>
      <Rectangle 
        width={-80}  // Negative width moves rectangle left
        height={50} 
        fill="red" 
      />
    </Surface>
  );
}

Wedge Component

Pre-built wedge/arc component for creating pie chart segments, arcs, and circular sectors with configurable angles and radii.

/**
 * Wedge component for drawing circles, wedges, arcs, and pie chart segments
 * Creates arc paths with configurable start/end angles and inner/outer radii
 * @param props - Wedge configuration and styling
 * @returns JSX.Element | null (returns null when startAngle equals endAngle)
 */
function Wedge(props: {
  /** Outer radius of the wedge in pixels */
  outerRadius: number;
  /** Starting angle in degrees (0 = 12 o'clock, increases clockwise) */
  startAngle: number;
  /** Ending angle in degrees (0 = 12 o'clock, increases clockwise) */
  endAngle: number;
  /** Inner radius in pixels (creates arc/donut shape when > 0) */
  innerRadius?: number;
  /** Fill color (string) or fill object (gradient/pattern) */
  fill?: string | FillObject;
  /** Stroke color */
  stroke?: string;
  /** Stroke width in pixels */
  strokeWidth?: number;
  /** Stroke dash pattern */
  strokeDash?: number[];
  /** Stroke line cap style */
  strokeCap?: 'butt' | 'round' | 'square';
  /** Stroke line join style */
  strokeJoin?: 'miter' | 'round' | 'bevel';
  /** Opacity (0-1) */
  opacity?: number;
}): JSX.Element | null;

Usage Examples:

import React from 'react';
import { Surface } from 'react-art';
import Wedge from 'react-art/Wedge';

// Pie chart segment
function PieSlice() {
  return (
    <Surface width={150} height={150}>
      <Wedge 
        outerRadius={60}
        startAngle={0}
        endAngle={90}
        fill="blue"
        stroke="darkblue"
        strokeWidth={2}
      />
    </Surface>
  );
}

// Full circle using wedge
function CircleFromWedge() {
  return (
    <Surface width={150} height={150}>
      <Wedge 
        outerRadius={50}
        startAngle={0}
        endAngle={360}  // Full circle
        fill="green"
      />
    </Surface>
  );
}

// Donut/arc shape with inner radius
function DonutArc() {
  return (
    <Surface width={150} height={150}>
      <Wedge 
        outerRadius={60}
        innerRadius={30}  // Creates hollow center
        startAngle={45}
        endAngle={135}
        fill="orange"
        stroke="darkorange"
        strokeWidth={2}
      />
    </Surface>
  );
}

// Multiple wedges for pie chart
function PieChart() {
  const data = [
    { value: 30, color: 'red' },
    { value: 25, color: 'blue' },
    { value: 20, color: 'green' },
    { value: 25, color: 'orange' }
  ];
  
  let currentAngle = 0;
  
  return (
    <Surface width={200} height={200}>
      {data.map((slice, index) => {
        const startAngle = currentAngle;
        const endAngle = currentAngle + (slice.value / 100) * 360;
        currentAngle = endAngle;
        
        return (
          <Wedge
            key={index}
            outerRadius={80}
            startAngle={startAngle}
            endAngle={endAngle}
            fill={slice.color}
            stroke="white"
            strokeWidth={2}
          />
        );
      })}
    </Surface>
  );
}

// Arc with large angle (>180 degrees)
function LargeArc() {
  return (
    <Surface width={150} height={150}>
      <Wedge 
        outerRadius={60}
        innerRadius={40}
        startAngle={45}
        endAngle={315}  // 270 degree arc
        fill="purple"
      />
    </Surface>
  );
}

Shape Component Behavior

Angle System

All angles are specified in degrees (not radians)
0 degrees = 12 o'clock position (top of circle)
Angles increase clockwise: 90° = 3 o'clock, 180° = 6 o'clock, 270° = 9 o'clock
Negative angles are supported and wrap around
Note: Wedge component returns null when startAngle equals endAngle (zero-degree arc)

Radius Handling

All radius values are in pixels
Rectangle radius values are clamped to prevent overlapping corners
Wedge component sorts inner/outer radius automatically (smaller becomes inner)
Negative radius values are treated as 0

Path Generation

All shape components internally create Path objects and render them using the base Shape component
The generated paths are optimized for the specific shape type
Complex shapes (like rounded rectangles) handle edge cases automatically

Types

// Fill object union type used by all shape components
type FillObject = LinearGradient | RadialGradient | Pattern;

// Stroke cap styles
type StrokeCap = 'butt' | 'round' | 'square';

// Stroke join styles  
type StrokeJoin = 'miter' | 'round' | 'bevel';

Install with Tessl CLI