@measured/puck 0.12.0-canary.5caf0ab → 0.12.0-canary.889b4c7

package/README.md

@@ -33,7 +33,7 @@ Render the editor:
 ```jsx
 // Editor.jsx
 import { Puck } from "@measured/puck";
-import "@measured/puck/dist/index.css";
+import "@measured/puck/puck.css";
 
 // Create puck component config
 const config = {
@@ -71,7 +71,7 @@ Render the page:
 ```jsx
 // Page.jsx
 import { Render } from "@measured/puck";
-import "@measured/puck/dist/index.css";
+import "@measured/puck/puck.css";
 
 export function Page() {
   return <Render config={config} data={data} />;
@@ -374,6 +374,36 @@ import { resolveAllData } from "@measured/puck";
 const resolvedData = resolveAllData(data, config);
 ```
 
+### React server components
+
+If you want to use React server components, use ` <Render>` from the `@measured/puck/rsc` bundle instead of the main bundle.
+
+```tsx
+import { Render } from "@measured/puck/rsc";
+import "@measured/puck/puck.css";
+
+export function Page() {
+  return <Render config={config} data={data} />;
+}
+```
+
+If you're using DropZones with React server components, use the `puck.renderDropZone` prop provided to your render function instead of the `<DropZone>` component.
+
+```tsx
+export const MyComponent: ComponentConfig = {
+  render: ({ puck: { renderDropZone } }) => {
+    return (
+      <div>
+        {renderDropZone({ zone: "first-drop-zone" })}
+        {renderDropZone({ zone: "second-drop-zone" })}
+      </div>
+    );
+  },
+};
+```
+
+In future, we may deprecate DropZone in favour of renderDropZone.
+
 ## Reference
 
 ### `<Puck>`