react-two.js 0.8.22-r.1 → 0.8.22-r.3

package/README.md

@@ -67,8 +67,8 @@ npm install react-two.js react react-dom two.js
 ```
 
 **Requirements** as peer dependencies:
-- React 18.3+
-- Two.js v0.8.21+
+- React 19+
+- Two.js v0.8.22+
 
 > [!IMPORTANT]
 > react-two.js is a React renderer, it must pair with a major version of React, like react-dom.
@@ -158,10 +158,11 @@ function Component() {
   const { two, width, height } = useTwo()
 
   useEffect(() => {
+    if (!two) return;
     two.play();
     console.log('Canvas size:', width, height)
     console.log('Two.js instance:', instance)
-  }, [])
+  }, [two])
 }
 ```
 

package/dist/Context.d.ts

@@ -2,14 +2,21 @@ import Two from 'two.js';
 import type { Group } from 'two.js/src/group';
 import type { Shape } from 'two.js/src/shape';
 import type { EventHandlers } from './Events';
-export interface TwoContext {
+export interface TwoCoreContextValue {
     two: Two | null;
+    registerEventShape: (shape: Shape | Group, handlers: Partial<EventHandlers>, parent?: Group) => void;
+    unregisterEventShape: (shape: Shape | Group) => void;
+}
+export interface TwoParentContextValue {
     parent: Group | null;
+}
+export interface TwoSizeContextValue {
     width: number;
     height: number;
-    registerEventShape: (shape: Shape | Group, handlers: Partial<EventHandlers>, parent?: Group) => void;
-    unregisterEventShape: (shape: Shape | Group) => void;
 }
-export declare const Context: import("react").Context<TwoContext>;
-export declare const useTwo: () => TwoContext;
+export declare const TwoCoreContext: import("react").Context<TwoCoreContextValue>;
+export declare const TwoParentContext: import("react").Context<TwoParentContextValue>;
+export declare const TwoSizeContext: import("react").Context<TwoSizeContextValue>;
+export declare const Context: import("react").Context<TwoCoreContextValue>;
+export declare const useTwo: () => TwoCoreContextValue & TwoParentContextValue & TwoSizeContextValue;
 export declare const useFrame: (callback: (elapsed: number, frameDelta: number) => void, deps?: unknown[]) => void;

package/dist/SVG.d.ts

@@ -2,17 +2,21 @@ import React from 'react';
 import type { Group as Instance } from 'two.js/src/group';
 import { ShapeProps, type EventHandlers } from './Properties';
 type GroupProps = ShapeProps | 'fill' | 'stroke' | 'linewidth' | 'cap' | 'join' | 'miter' | 'closed' | 'curved' | 'automatic';
-export interface SVGProps extends React.PropsWithChildren<{
+type ComponentProps = React.PropsWithChildren<{
     [K in Extract<GroupProps, keyof Instance>]?: Instance[K];
-}>, Partial<EventHandlers> {
-    src?: string;
-    content?: string;
+} & ({
+    src: string;
+    content?: never;
+} | {
+    src?: never;
+    content: string;
+}) & {
     x?: number;
     y?: number;
-    onLoad?: (group: RefSVG, svg: SVGElement | SVGElement[]) => void;
+    onLoad?: (group: Instance, svg: SVGElement | SVGElement[]) => void;
     onError?: (error: Error) => void;
     shallow?: boolean;
-}
+} & Partial<EventHandlers>>;
 export type RefSVG = Instance;
-export declare const SVG: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<Instance>>;
+export declare const SVG: React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<Instance>>;
 export {};

package/dist/main.d.ts

@@ -1,7 +1,7 @@
 export { Provider as Canvas } from './Provider';
 export { Context, useTwo, useFrame } from './Context';
 export { Group, type RefGroup } from './Group';
-export { SVG, type RefSVG, type SVGProps } from './SVG';
+export { SVG, type RefSVG } from './SVG';
 export { Path, type RefPath } from './Path';
 export { Points, type RefPoints } from './Points';
 export { Text, type RefText } from './Text';