react-two.js 0.8.22 → 0.8.23

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])
 }
 ```
 
@@ -189,6 +190,7 @@ function Component() {
 - **`<Text>`** — Text rendering
 
 #### Advanced
+- **`<SVG>`** — Load and interpret SVG files or inline SVG markup
 - **`<Image>`** - Basic image class inspired by Figma
 - **`<Sprite>`** — Animated sprite sheets
 - **`<ImageSequence>`** — Animated image sequence
@@ -307,6 +309,75 @@ function () {
 }
 ```
 
+### Loading SVG Files
+
+Load external SVG files or use inline SVG markup with the `<SVG>` component:
+
+```jsx
+import { SVG } from 'react-two.js'
+
+// Load from external URL
+function Logo() {
+  return (
+    <SVG
+      src="/assets/logo.svg"
+      x={100}
+      y={100}
+      onLoad={(group, svg) => {
+        console.log('SVG loaded with', group.children.length, 'objects')
+      }}
+      onError={(error) => {
+        console.error('Failed to load SVG:', error)
+      }}
+    />
+  )
+}
+
+// Use inline SVG markup
+function Icon() {
+  return (
+    <SVG
+      content={`
+        <svg viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="40" fill="#FF6B6B" />
+          <circle cx="35" cy="40" r="8" fill="white" />
+          <circle cx="65" cy="40" r="8" fill="white" />
+        </svg>
+      `}
+      x={200}
+      y={200}
+      scale={0.5}
+    />
+  )
+}
+
+// Animate loaded SVG
+function AnimatedIcon() {
+  const svgRef = useRef()
+
+  useFrame((elapsed) => {
+    if (svgRef.current) {
+      svgRef.current.rotation = Math.sin(elapsed) * 0.5
+      svgRef.current.scale = 1 + Math.sin(elapsed * 2) * 0.1
+    }
+  })
+
+  return <SVG ref={svgRef} src="/icon.svg" x={400} y={300} />
+}
+```
+
+**SVG Props:**
+- `src` — URL to external .svg file
+- `content` — Inline SVG markup string
+- `x`, `y` — Position
+- `scale`, `rotation` — Transform properties
+- `onLoad(group, svg)` — Callback when SVG loads successfully
+- `onError(error)` — Callback when loading fails
+- All Two.js Group properties (fill, stroke, opacity, etc.)
+
+> [!NOTE]
+> The SVG component uses Two.js's `load()` method which supports a subset of SVG 1.1 features. Complex SVG features like filters, animations (SMIL), and some advanced elements may not be fully supported. Refer to [Two.js SVG documentation](https://two.js.org/docs/two/#two-interpret) for details on supported features.
+
 ## Learn More
 
 - **[Two.js Documentation](https://two.js.org/docs/)** — Complete Two.js API reference

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/Image.d.ts

@@ -44,6 +44,7 @@ export declare const Image: React.ForwardRefExoticComponent<{
     x?: number;
     y?: number;
     mode?: string;
+    src?: string | Texture;
     texture?: Texture;
 } & Partial<EventHandlers> & {
     children?: React.ReactNode | undefined;

package/dist/ImageSequence.d.ts

@@ -42,7 +42,7 @@ export declare const ImageSequence: React.ForwardRefExoticComponent<{
     frameRate?: number | undefined;
     index?: number | undefined;
 } & {
-    paths?: string | string[] | Texture | Texture[];
+    src?: string | string[] | Texture | Texture[];
     x?: number;
     y?: number;
     autoPlay?: boolean;

package/dist/Provider.d.ts

@@ -4,6 +4,8 @@ type TwoConstructorProps = ConstructorParameters<typeof Two>[0];
 type TwoConstructorPropsKeys = NonNullable<TwoConstructorProps>;
 type ComponentProps = React.PropsWithChildren<TwoConstructorPropsKeys & {
     onPointerMissed?: (event: PointerEvent) => void;
+} & {
+    container?: React.ComponentProps<'div'>;
 }>;
 export declare const Provider: React.FC<ComponentProps>;
 export {};

package/dist/SVG.d.ts

@@ -0,0 +1,22 @@
+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';
+type ComponentProps = React.PropsWithChildren<{
+    [K in Extract<GroupProps, keyof Instance>]?: Instance[K];
+} & ({
+    src: string;
+    content?: never;
+} | {
+    src?: never;
+    content: string;
+}) & {
+    x?: number;
+    y?: number;
+    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<ComponentProps & React.RefAttributes<Instance>>;
+export {};

package/dist/Sprite.d.ts

@@ -43,7 +43,7 @@ export declare const Sprite: React.ForwardRefExoticComponent<{
     columns?: number | undefined;
     rows?: number | undefined;
 } & {
-    path?: string;
+    src?: string;
     x?: number;
     y?: number;
     autoPlay?: boolean;

package/dist/Text.d.ts

@@ -28,10 +28,10 @@ export declare const Text: React.ForwardRefExoticComponent<{
         offset?: number;
     }) | undefined;
     size?: number | undefined;
+    style?: import("two.js/src/text").StyleProperties | undefined;
     family?: string | undefined;
     leading?: number | undefined;
     alignment?: import("two.js/src/text").AlignmentProperties | undefined;
-    style?: import("two.js/src/text").StyleProperties | undefined;
     weight?: string | number | undefined;
     decoration?: import("two.js/src/text").DecorationProperties | undefined;
     direction?: import("two.js/src/text").DirectionProperties | undefined;

package/dist/Texture.d.ts

@@ -14,11 +14,11 @@ export declare const Texture: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     repeat?: import("two.js/src/effects/texture").RepeatProperties | undefined;
     src?: string | undefined;
+    image?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | undefined;
     loaded?: boolean | undefined;
     offset?: import("two.js/src/vector").Vector | undefined;
-    image?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | undefined;
 } & {
-    source?: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
+    src?: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<Instance>>;

package/dist/main.d.ts

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