React Paper.js

React fiber renderer and component container for Paper.js.

Install

Recommended: Paper 0.12.x, React, React DOM 17.x.

npm install --save @psychobolt/react-paperjs
# or
yarn add @psychobolt/react-paperjs

Examples

There are several demos. Also check out their sources. Here is one to get you started:

import React from 'react';
import { PaperContainer, Circle, Layer } from '@psychobolt/react-paperjs'

const Shapes = () => <Circle center={[120, 50]} radius={35} fillColor="#00FF00" />;

const App = (props) => (
  <div>
    <PaperContainer {...props}>
      <Circle center={[80, 50]} radius={35} fillColor="red" />
      <Layer>
        <Shapes />
      </Layer>
    </PaperContainer>
  </div>
);

export default App;

Components

Common usage with PaperContainer and its default renderer.

PaperContainer

Provide and creates Paper Scope context. To access Paper Scope, you may use the provided HOC. All children are rendered into its canvas with PaperRenderer by default.

Props

renderer?: Renderer

The default is PaperRenderer. Alternatively, you can extend and pass in your own.

canvasProps?: {} | (paper) => ({})

Props to be passed to <canvas>. Alternatively, you can provide a function that returns new props.

viewProps?: {} | (paper) => ({})

Props to be passed to the View. Alternatively, you can provide a function that returns new props.

onMount?: (paper) => myCallback(paper)

Callback on container mount.

className?: string

Canvas element class attribute.

Paper

Refer supported Paper types. All props are passed to the type constructor.

API

PaperRenderer

Currently a synchronous but extensible implementation.

Members

defaultHostConfig: {}

The host config that is passed into React Reconciler by default. This should not be mutated. Instead, extend PaperRenderer with a getHostConfig function.

defaultTypes: { [type: string]: (props: {}, paper: Paper) => Object}

A mapping of types with their instance factory method. This should not be mutated. Instead, extend PaperRenderer with a getInstanceFactory function.

Extension Example

import React from 'React';
import { PaperContainer, PaperRenderer } from '@psychobolt/react-paperjs'

import MyCustomStencil, { TYPE_NAME as MyCustomStencilComponent } from './MyCustomStencil';

class MyPaperRenderer extends PaperRenderer {
  getInstanceFactory() {
    return { 
      ...this.defaultTypes, /* 
        refer to default types
        see https://github.com/psychobolt/react-paperjs/blob/master/src/Paper.types.js#L42 
      */
      [MyCustomStencilComponent]: (props, paper) => new MyCustomStencil(props),
    };
  }
}

const App = (props) => (
   <PaperContainer renderer={MyPaperRenderer}>
     <MyCustomStencilComponent />
   </PaperContainer>
);

export default App;

The above code adds a custom Component Type to the renderer's instance factory. Then the component can be rendered inside the container.

Higher-order Components

Paper Scope

Injects Paper Scope as component prop 'paper'.

Example usage:

import React from 'react';

import { PaperScope, Circle } from '@psychobolt/react-paperjs';

export default @PaperScope class Scene {
  render() {
    const { paper } = this.props;
    return <Circle fillColor="red" radius={35} center={paper.view.center} />;
  }
}

As an alternative, you can use a helper function:

import React from 'react';

import { renderWithPaperScope, Circle } from '@psychobolt/react-paperjs';

export default class Scene {
  render() {
    return renderWithPaperScope(paper => <Circle fillColor="red" radius={35} center={paper.view.center} />);
  }
}

Extensions

If you're interested in editor components for React Paper JS, you can checkout another library that's work in progress.

Development Guide

Please see DEVELOPMENT.md