{"library":"react-zdog","title":"React-Zdog","description":"React-Zdog is a declarative React Fiber renderer for Zdog, a 'cute pseudo 3D engine'. It enables developers to integrate Zdog scenes directly into their React applications, leveraging React's component model for building reusable 3D elements with reactive state semantics. The library abstracts Zdog's imperative API into a set of declarative React components like `Illustration` and `Shape`, and provides hooks such as `useRender`, `useZdog`, and `useInvalidate` for finer-grained control over the Zdog instance and its rendering lifecycle. The current stable version is 1.2.2. While there isn't an explicit release cadence, it tends to update in response to changes in React or Zdog. Its key differentiator is simplifying Zdog development for React users, offering a more intuitive and component-based approach compared to direct Zdog API manipulation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-zdog"],"cli":null},"imports":["import { Illustration } from 'react-zdog'","import { Shape } from 'react-zdog'","import { useRender } from 'react-zdog'","import { useInvalidate } from 'react-zdog'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import ReactDOM from \"react-dom\";\nimport React from \"react\";\nimport { Illustration, Shape } from \"react-zdog\";\n\nfunction App() {\n  return (\n    <div style={{ width: '100vw', height: '100vh', background: '#f0f0f0' }}>\n      <Illustration zoom={8} style={{ display: 'block' }}>\n        <Shape stroke={20} color=\"lightblue\" rotate={{ x: Math.PI }} />\n      </Illustration>\n    </div>\n  );\n}\n\nReactDOM.render(\n  <App />,\n  document.getElementById(\"root\")\n);","lang":"javascript","description":"Demonstrates rendering a basic blue Zdog shape within a full-viewport React application using the Illustration component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}