@measured/puck 0.12.0-canary.12cea1e → 0.12.0-canary.ac59e51

Sign up to get free protection for your applications and to get access to all the features.
Files changed (2) hide show
  1. package/README.md +30 -0
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -374,6 +374,36 @@ import { resolveAllData } from "@measured/puck";
374
374
  const resolvedData = resolveAllData(data, config);
375
375
  ```
376
376
 
377
+ ### React server components
378
+
379
+ If you want to use React server components, use ` <Render>` from the `@measured/puck/rsc` bundle instead of the main bundle.
380
+
381
+ ```tsx
382
+ import { Render } from "@measured/puck/rsc";
383
+ import "@measured/puck/dist/index.css";
384
+
385
+ export function Page() {
386
+ return <Render config={config} data={data} />;
387
+ }
388
+ ```
389
+
390
+ If you're using DropZones with React server components, use the `puck.renderDropZone` prop provided to your render function instead of the `<DropZone>` component.
391
+
392
+ ```tsx
393
+ export const MyComponent: ComponentConfig = {
394
+ render: ({ puck: { renderDropZone } }) => {
395
+ return (
396
+ <div>
397
+ {renderDropZone({ zone: "first-drop-zone" })}
398
+ {renderDropZone({ zone: "second-drop-zone" })}
399
+ </div>
400
+ );
401
+ },
402
+ };
403
+ ```
404
+
405
+ In future, we may deprecate DropZone in favour of renderDropZone.
406
+
377
407
  ## Reference
378
408
 
379
409
  ### `<Puck>`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.12.0-canary.12cea1e",
3
+ "version": "0.12.0-canary.ac59e51",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",