react-zdog

What is react-zdog?

react-zdog is a React wrapper for Zdog, a pseudo-3D engine for canvas and SVG. It allows you to create and animate 3D-like illustrations using a simple and intuitive API.

What are react-zdog's main functionalities?

Creating Shapes

This code demonstrates how to create a basic shape using react-zdog. The `Shape` component is used to draw a simple shape with a specified stroke and color.

```jsx
import React from 'react';
import { Illustration, Shape } from 'react-zdog';

const MyShape = () => (
  <Illustration>
    <Shape
      stroke={20}
      color="#636"
    />
  </Illustration>
);

export default MyShape;
```

Animating Shapes

This code demonstrates how to animate a shape using react-zdog. The `useRef` and `useEffect` hooks are used to rotate the shape continuously.

```jsx
import React, { useRef, useEffect } from 'react';
import { Illustration, Shape } from 'react-zdog';

const AnimatedShape = () => {
  const shapeRef = useRef(null);

  useEffect(() => {
    const animate = () => {
      shapeRef.current.rotate.y += 0.03;
      requestAnimationFrame(animate);
    };
    animate();
  }, []);

  return (
    <Illustration>
      <Shape
        ref={shapeRef}
        stroke={20}
        color="#636"
      />
    </Illustration>
  );
};

export default AnimatedShape;
```

Combining Shapes

This code demonstrates how to combine multiple shapes using the `Group` component in react-zdog. The `Group` component allows you to group multiple shapes together and manipulate them as a single entity.

```jsx
import React from 'react';
import { Illustration, Shape, Group } from 'react-zdog';

const CombinedShapes = () => (
  <Illustration>
    <Group>
      <Shape
        stroke={20}
        color="#636"
      />
      <Shape
        translate={{ x: 40 }}
        stroke={20}
        color="#E62"
      />
    </Group>
  </Illustration>
);

export default CombinedShapes;
```

Other packages similar to react-zdog

react-three-fiber

react-three-fiber is a React renderer for Three.js, a popular 3D library. It allows you to create complex 3D scenes and animations using React components. Compared to react-zdog, react-three-fiber offers more advanced 3D capabilities and is suitable for more complex and high-performance 3D applications.

react-konva

react-konva is a React wrapper for the Konva framework, which is used for creating 2D canvas applications. While it focuses on 2D rather than 3D, it provides a powerful API for creating and animating shapes, images, and text. It is more suitable for 2D graphics compared to the pseudo-3D capabilities of react-zdog.

react-pixi

react-pixi is a React wrapper for PixiJS, a fast 2D rendering engine. It allows you to create high-performance 2D graphics and animations using React components. Similar to react-konva, it is focused on 2D graphics but offers a more performance-oriented approach compared to react-zdog's pseudo-3D capabilities.

README

npm install zdog react-zdog

react-zdog is a declarative abstraction of zdog, a cute pseudo 3d-engine. Doing zdog in React allows you to break up your scene graph into declarative, re-usable components with clean, reactive semantics. Try a live demo here.

How it looks like

import ReactDOM from 'react-dom'
import React from 'react'
import { Illustration, Shape } from 'react-zdog'

ReactDOM.render(
  <Illustration zoom={8}>
    <Shape stroke={20} color="lightblue" />
  </Illustration>,
  document.getElementById('root')
)

Api

Comming soon ... For now, this little demo here has it all covered. react-zdog basically forwards props to zdog primitives, anything you can do in zdog is possible here, too.

Illustration

The Illustration object is your portal into zdog. It forwards unreserved properties to the internal Zdog.Illustration instance.

<Canvas element="svg" /> // Can bei either 'svg' or 'canvas'

Hooks

All hooks can only be used inside the Illustration element because they rely on context updates!

useRender(callback, dependencies=[])

If you're running effects that need to get updated every frame, useRender gives you access to the render-loop.

import { useRender } from 'react-zdog'

function MyComponent() {
  // Subscribes to the render-loop, gets cleaned up automatically when the component unmounts
  useRender(t => console.log("I'm in the render-loop"))

useZdog()

Gives you access to the underlying state-model.

import { useZdog } from 'react-zdog'

function MyComponent() {
  const {
    illu,             // The parent Zdog.Illustration object
    scene,            // The Zdog.Anchor object that's being used as the default scene
    size,             // Current canvas size
  } = useZdog()