@max3a3/react-paperjs v0.0.59
React Paper.js
React fiber renderer and component container for Paper.js.
Install
Recommended: Paper 0.12.x, React, React DOM 16.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 from './MyCustomStencil';
class MyPaperRenderer extends PaperRenderer {
getInstanceFactory() {
return {
...this.defaultTypes,
[MyCustomStencil.TYPE_NAME]: (props, paper) => new MyCustomStencil(props),
};
}
}
const App = (props) => (
<PaperContainer renderer={MyPaperRenderer}>
<MyCustomStencil>
</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.