@tscircuit/pcb-viewer 1.10.16 → 1.10.18

package/README.md

@@ -12,12 +12,18 @@ If you want to render to an image, check out [circuit-to-png](https://github.com
 
 ## Usage
 
-```
+```bash
 npm install @tscircuit/pcb-viewer
 ```
 
+There are two main ways to use the PCBViewer:
+
+### 1. Using Circuit Components
+
+This approach allows you to declaratively define your circuit using React components:
+
 ```tsx
-import React, { useEffect, useRef } from "react"
+import React from "react"
 import { PCBViewer } from "@tscircuit/pcb-viewer"
 
 export default () => {
@@ -25,8 +31,57 @@ export default () => {
     <div style={{ backgroundColor: "black" }}>
       <PCBViewer>
         <resistor footprint="0805" resistance="10k" />
+        <capacitor footprint="0603" capacitance="100nF" />
       </PCBViewer>
     </div>
   )
 }
 ```
+
+### 2. Using Circuit JSON
+
+If you already have circuit JSON data, you can pass it directly:
+
+```tsx
+import React from "react"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+
+const circuitJson = [
+  {
+    type: "pcb_component",
+    pcb_component_id: "R1",
+    center: { x: 0, y: 0 },
+    // ... other component properties
+  },
+  // ... more elements
+]
+
+export default () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer circuitJson={circuitJson} />
+    </div>
+  )
+}
+```
+
+### Props
+
+The PCBViewer component accepts these props:
+
+- `children`: Circuit components to render
+- `circuitJson`: Circuit JSON elements array (alternative to children)
+- `height`: Height of viewer in pixels (default: 600)
+- `allowEditing`: Enable/disable editing capabilities (default: true)
+- `editEvents`: Array of edit events to apply
+- `onEditEventsChanged`: Callback when edit events change
+- `initialState`: Initial state for the viewer
+
+### Features
+
+- Interactive PCB viewing with pan and zoom
+- Multiple layer support (top, bottom, inner layers)
+- Component placement editing
+- Trace routing
+- DRC (Design Rule Check) visualization
+- Measurement tools

package/dist/index.d.ts

@@ -56,6 +56,7 @@ type EditEvent = EditComponentLocationEvent | EditTraceHintEvent;
 
 type Props = {
     children?: any;
+    circuitJson?: AnyCircuitElement[];
     soup?: any;
     height?: number;
     allowEditing?: boolean;
@@ -63,7 +64,7 @@ type Props = {
     initialState?: Partial<StateProps>;
     onEditEventsChanged?: (editEvents: EditEvent[]) => void;
 };
-declare const PCBViewer: ({ children, soup, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ children, soup, circuitJson, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, }: Props) => react_jsx_runtime.JSX.Element;
 
 declare const applyEditEvents: (soup: AnyCircuitElement[], edit_events: EditEvent[]) => AnyCircuitElement[];