React Paper.js



React fiber renderer and component container for Paper.js.

Install

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

``sh
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:

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

const Shapes = () => ;

const App = (props) => (


);

export default App;
`

Components

Common usage with PaperContainer and its default renderer.

$3

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 ``. 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.

$3

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

API

$3

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

`js
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) => (



);

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:
`jsx
import React from 'react';

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

export default @PaperScope class Scene {
render() {
const { paper } = this.props;
return ;
}
}
`

As an alternative, you can use a helper function:
`jsx
import React from 'react';

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

export default class Scene {
render() {
return renderWithPaperScope(paper => );
}
}
``

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