react-canva
TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

React-Canva

npm version npm npm bundle size

(Project in development)

React-Canva is a JavaScript library for drawing complex canvas graphics using React.

This is not another renderer for React as React Konva. You can use this library together with DOM (as opposed to React Konva). This library takes control of the canvas in the usual form for React.

Installation

npm install react-canva --save

Example

import React from "react";
import {render} from "react-dom";
import {Canvas, Text, Rect, Arc, Line} from "react-canva";

const App = () => {
    return (
        <div>
            <Canvas>
                <Rect x={10}
                      y={10}
                      width={200}
                      height={200}
                      fill="#030303"
                      stroke="red"/>
                <Text text={"React-Canva"}
                      font={"48px serif"}
                      x={100}
                      y={100}
                      stroke={"cyan"}
                      fill={"white"}
                      onClick={onClick}/>
                <Line x1={10}
                      y1={10}
                      x2={20}
                      y2={30}
                      onClick={onClick}/>
                <Arc x={10}
                     y={10}
                     radius={50}
                     startAngle={0}
                     endAngle={180}
                     stroke={"cyan"}
                     fill={"white"}
                     onClick={onClick}
                     lineCap="butt"
                     lineDashOffset={0.0}
                     lineJoin="miter"
                     lineWidth={1.0}
                     miterLimit={10.0}/>
            </Canvas>
        </div>
    );
}

render(<App/>, document.getElementById('root'));

Core API

Supported Events

  • onClick
  • onContextMenu
  • onDoubleClick
  • onMouseDown
  • onMouseUp
  • onPointerDown

Base Props

export interface BaseProps {
    stroke?: string;
    fill?: string;
    lineCap?: CanvasLineCap;
    lineDashOffset?: number;
    lineJoin?: CanvasLineJoin;
    lineWidth?: number;
    miterLimit?: number;
}

Rect

export interface RectProps extends BaseProps {
    x: number;
    y: number;
    width: number;
    height: number;
}

Arc

export interface ArcProps extends BaseProps {
    x: number;
    y: number;
    radius: number;
    startAngle: number;
    endAngle: number;
    anticlockwise?: boolean;
}

Line

export interface LineProps extends BaseProps {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
}

Text

export interface TextProps extends BaseProps {
    x: number;
    y: number;
    text: string;
    font: string;
}

Package Sidebar

Install

npm i react-canva

Weekly Downloads

12

Version

0.1.5

License

MIT

Unpacked Size

44.5 kB

Total Files

15

Last publish

Collaborators

  • hello_anton