@measured/puck 0.12.0-canary.afd6a9d → 0.12.0-canary.b0d1620
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +9 -9
- package/dist/{Config-60a50493.d.ts → Config-a03de579.d.ts} +1 -0
- package/dist/index.css +287 -150
- package/dist/index.d.ts +4 -4
- package/dist/index.js +407 -517
- package/dist/rsc.d.ts +1 -1
- package/package.json +22 -1
package/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
#
|
1
|
+
# Puck
|
2
2
|
|
3
3
|
The self-hosted, drag and drop editor for React.
|
4
4
|
|
@@ -21,7 +21,7 @@ The self-hosted, drag and drop editor for React.
|
|
21
21
|
|
22
22
|
- 🖱️ **Drag and drop**: Visual editing for your existing React component library
|
23
23
|
- 🌐 **Integrations**: Load your content from a 3rd party headless CMS
|
24
|
-
- ✍️ **Inline editing**: Author content directly via
|
24
|
+
- ✍️ **Inline editing**: Author content directly via Puck for convenience
|
25
25
|
- ⭐️ **No vendor lock-in**: Self-host or integrate with your existing application
|
26
26
|
|
27
27
|
[See demo](https://puck-editor-demo.vercel.app/edit)
|
@@ -33,9 +33,9 @@ Render the editor:
|
|
33
33
|
```jsx
|
34
34
|
// Editor.jsx
|
35
35
|
import { Puck } from "@measured/puck";
|
36
|
-
import "@measured/puck/
|
36
|
+
import "@measured/puck/puck.css";
|
37
37
|
|
38
|
-
// Create
|
38
|
+
// Create Puck component config
|
39
39
|
const config = {
|
40
40
|
components: {
|
41
41
|
HeadingBlock: {
|
@@ -71,7 +71,7 @@ Render the page:
|
|
71
71
|
```jsx
|
72
72
|
// Page.jsx
|
73
73
|
import { Render } from "@measured/puck";
|
74
|
-
import "@measured/puck/
|
74
|
+
import "@measured/puck/puck.css";
|
75
75
|
|
76
76
|
export function Page() {
|
77
77
|
return <Render config={config} data={data} />;
|
@@ -86,7 +86,7 @@ Install the package
|
|
86
86
|
npm i @measured/puck --save
|
87
87
|
```
|
88
88
|
|
89
|
-
Or generate a
|
89
|
+
Or generate a Puck application using a recipe
|
90
90
|
|
91
91
|
```sh
|
92
92
|
npx create-puck-app my-app
|
@@ -380,7 +380,7 @@ If you want to use React server components, use ` <Render>` from the `@measured/
|
|
380
380
|
|
381
381
|
```tsx
|
382
382
|
import { Render } from "@measured/puck/rsc";
|
383
|
-
import "@measured/puck/
|
383
|
+
import "@measured/puck/puck.css";
|
384
384
|
|
385
385
|
export function Page() {
|
386
386
|
return <Render config={config} data={data} />;
|
@@ -521,7 +521,7 @@ External fields can be used to load content from an external content repository,
|
|
521
521
|
|
522
522
|
### `AppState`
|
523
523
|
|
524
|
-
The `AppState` object stores the
|
524
|
+
The `AppState` object stores the Puck application state.
|
525
525
|
|
526
526
|
- **data** (`Data`): The page data currently being rendered
|
527
527
|
- **ui** (`object`):
|
@@ -536,7 +536,7 @@ The `AppState` object stores the puck application state.
|
|
536
536
|
|
537
537
|
### `Data`
|
538
538
|
|
539
|
-
The `Data` object stores the
|
539
|
+
The `Data` object stores the Puck page data.
|
540
540
|
|
541
541
|
- **root** (`ComponentData`): The component data for the root of your configuration.
|
542
542
|
- **props** (object): Extends `ComponentData.props`, with some additional props
|