@measured/puck 0.12.0-canary.5caf0ab → 0.12.0-canary.68cdc49
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +30 -0
- package/dist/index.js +8 -6
- 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/dist/index.js
CHANGED
@@ -33102,14 +33102,16 @@ var InputOrGroup = (_a) => {
|
|
33102
33102
|
var _b = _a, { onChange } = _b, props = __objRest(_b, ["onChange"]);
|
33103
33103
|
const { name, field, value, readOnly } = props;
|
33104
33104
|
const [localValue, setLocalValue] = (0, import_react30.useState)(value);
|
33105
|
-
const
|
33106
|
-
|
33107
|
-
|
33108
|
-
|
33109
|
-
|
33110
|
-
|
33105
|
+
const onChangeDb = (0, import_use_debounce2.useDebouncedCallback)(
|
33106
|
+
(val) => {
|
33107
|
+
onChange(val);
|
33108
|
+
},
|
33109
|
+
50,
|
33110
|
+
{ leading: true }
|
33111
|
+
);
|
33111
33112
|
const onChangeLocal = (0, import_react30.useCallback)((val) => {
|
33112
33113
|
setLocalValue(val);
|
33114
|
+
onChangeDb(val);
|
33113
33115
|
}, []);
|
33114
33116
|
(0, import_react30.useEffect)(() => {
|
33115
33117
|
setLocalValue(value);
|