From caf16ae43a35d06b73d0543d464f3c88507fa95a Mon Sep 17 00:00:00 2001
From: moon <362652565@qq.com>
Date: Thu, 7 Mar 2024 20:44:10 +0800
Subject: [PATCH] chore: readme
---
packages/core/README.md | 69 +++++++++++++++++++++--------------------
1 file changed, 35 insertions(+), 34 deletions(-)
diff --git a/packages/core/README.md b/packages/core/README.md
index 3836b5529..a92e2cba5 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -43,38 +43,39 @@ No need for complicated plugin systems. Design your editor from top to bottom th
A simple user component can easily be defined as such:
```jsx
-import {useNode} from "@craftjs/core";
+import { useNode } from "@craftjs/core";
-const TextComponent = ({text}) => {
- const { connectors: {drag} } = useNode();
+const TextComponent = ({ text }) => {
+ const {
+ connectors: { connect, drag },
+ } = useNode();
return (
-
+
connect(drag(ref))}>
{text}
- )
-}
+ );
+};
+
```
Heck, the entire UI of your page editor is built using just React.
```jsx
import React from "react";
-import {Editor, Frame, Canvas, Selector} from "@craftjs/core";
+import { Editor, Frame, Selector } from "@craftjs/core";
const App = () => {
return (
Some fancy header or whatever
// Editable area starts here
-
-
+
+
- )
-}
+ );
+};
```
### Control how your components are edited
@@ -83,32 +84,32 @@ An obvious requirement for page editors is that they need to allow users to edit
In the following example, when the user clicks on a component, we'll display a modal that requires the user to input a value for the `text` prop. As the input value changes, the component will be re-rendered with updated prop.
```jsx
-import {useNode} from "@craftjs/core";
+import { useNode } from "@craftjs/core";
-const TextComponent = ({text}) => {
- const { connectors: { connect, drag }, isClicked, actions: {setProp} } = useNode(
- (state) => ({
- isClicked: state.event.selected,
- })
- );
+const TextComponent = ({ text }) => {
+ const {
+ connectors: { connect, drag },
+ isClicked,
+ actions: { setProp },
+ } = useNode((state) => ({
+ isClicked: state.events.selected,
+ }));
return (
-