graphics-debug 0.0.60 → 0.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -310,3 +310,23 @@ Here is the content of the `exampleGraphics.json` file:
|
|
|
310
310
|
```
|
|
311
311
|
|
|
312
312
|
You can load this example into the application to visualize the graphics objects and understand how the `graphics-debug` module works.
|
|
313
|
+
|
|
314
|
+
### React Components
|
|
315
|
+
|
|
316
|
+
The package also includes React helpers under `graphics-debug/react`.
|
|
317
|
+
The `<InteractiveGraphics>` component renders an interactive viewer with
|
|
318
|
+
zoom, pan and layer/step filtering built in.
|
|
319
|
+
|
|
320
|
+
```tsx
|
|
321
|
+
import { InteractiveGraphics } from "graphics-debug/react"
|
|
322
|
+
import exampleGraphics from "./exampleGraphics.json"
|
|
323
|
+
|
|
324
|
+
export default function Demo() {
|
|
325
|
+
return <InteractiveGraphics graphics={exampleGraphics} />
|
|
326
|
+
}
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
`InteractiveGraphics` accepts a `GraphicsObject` via the `graphics` prop.
|
|
330
|
+
You can optionally handle clicks on objects with `onObjectClicked` or
|
|
331
|
+
limit how many objects are drawn with `objectLimit`.
|
|
332
|
+
|