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 react-zdog

Demo: https://codesandbox.io/s/nervous-feather-vk9uh

import React, { useState, useEffect } from 'react'
import { Illustration, Ellipse, Shape } from 'react-zdog'

export default function Content() {
  const [visible, setVisible] = useState(true)
  useEffect(() => {
    // Test taking an object away
    setTimeout(() => setVisible(false), 1000)
  }, [])

  return (
    <Illustration zoom={10}>
      <Shape
        path={[{ x: 0, y: -8 }, { x: 8, y: 8 }, { x: -8, y: 8 }]}
        translate={{ z: 10 }}
        color="#E62"
        stroke={3}
        fill
      />
      {visible && <Ellipse diameter={20} translate={{ z: -10 }} stroke={5} color="#636" />}
    </Illustration>
  )
}