JSPM

react-fabricjs

0.1.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 152
  • Score
    100M100P100Q71687F
  • License BSD-2-Clause

fabricjs implemented by react

Package Exports

  • react-fabricjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-fabricjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-fabricjs npm version License BSD

React + Fabricjs

Overview

Quick start

Installation

  npm install react-fabricjs --save

Example

import React from 'react';
import {Canvas,Circle, Image, Path, Text} from 'react-fabricjs';

const App = () => {
    return (
        <Canvas
            ref="canvas"
            width="1000"
            height="1000"
        >
            <Circle
                ref="circle"
                radius={20}
                left={100}
                top={50}
                stroke="green"
            />

            <Image
                ref="image"
                imgElement={document.getElementById('my-image')}
                width={100}
                height={100}
            />

            <Image
                src="http://i.imgur.com/jZsNUCi.jpg"
                width={300}
                height={300}
                left={0}
                top={500}
            />


            <Path
                path="M 0 0 L 300 100 L 200 300 z"
                fill="red"
                stroke="green"
                strokeWidth={10}
                opacity={0.5}
            />

            <Text
                text="Click me"
                left={0}
                top={200}
                shadow="rgba(0,0,0,0.3) 5px 5px 5px"
                stroke="#ff1318"
                strokeWidth={1}
                fontStyle="italic"
                fontFamily="Hoefler Text"
            />
        </Canvas>
    );
};

Initialization

Event

Todo