React Fiber renderer and component container for Paper.js
npm install @psychobolt/react-paperjs





React fiber renderer and component container for Paper.js.
> Recommended: Paper 0.12.x, React, React DOM 17.x.
``sh`
npm install --save @psychobolt/react-paperjsor
yarn add @psychobolt/react-paperjs
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;
`
Common usage with PaperContainer and its default renderer.
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.
Refer supported Paper types. All props are passed to the type constructor.
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.
#### 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 =>
}
}
``
If you're interested in editor components for React Paper JS, you can checkout another library that's work in progress.
Please see DEVELOPMENT.md