Add usePaperScope, export PaperScopeSettings type

Author: HriBB

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-paper-bindings",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "description": "Paper.js renderer for React",
   "author": "Bojan Hribernik <bojan.hribernik@gmail.com>",
   "license": "MIT",

src/Canvas.tsx

@@ -17,7 +17,7 @@ export type PaperScopeSettings = {
   hitTolerance?: number;
 };
 
-export type Props = React.ComponentProps<'canvas'> & {
+export type CanvasProps = React.ComponentProps<'canvas'> & {
   width: number;
   height: number;
   settings?: PaperScopeSettings;
@@ -29,7 +29,7 @@ export type CanvasRef = HTMLCanvasElement | null;
 export type ScopeRef = paper.PaperScope | null | undefined;
 export type FiberRef = FiberRoot | null;
 
-export const Canvas = forwardRef<CanvasRef, Props>(function Canvas(
+export const Canvas = forwardRef<CanvasRef, CanvasProps>(function Canvas(
   { children, width, height, settings, scope, onScopeReady, ...props },
   forwardedRef
 ) {

src/index.ts

@@ -1,5 +1,6 @@
 export { Renderer } from './Renderer';
 export { Canvas } from './Canvas';
-export type { Props as CanvasProps } from './Canvas';
-export { PaperScope } from 'paper/dist/paper-core';
 export * from './Items';
+export { usePaperScope } from './usePaperScope';
+export { PaperScope } from 'paper/dist/paper-core';
+export type { CanvasProps, PaperScopeSettings } from './Canvas';

src/usePaperScope.tsx

@@ -0,0 +1,7 @@
+import { useRef } from 'react';
+import { PaperScope } from 'paper/dist/paper-core';
+
+export const usePaperScope = () => {
+  const scopeRef = useRef(new PaperScope());
+  return scopeRef.current;
+};