docs(README): guides about connector-react

README.md

@@ -43,34 +43,14 @@
 
 This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
-## Transaction Composing
-
-Here's an example for transferring CKB:
-
-```typescript
-const tx = ccc.Transaction.from({
- outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom(amount) }],
-});
-```
-
-Tell CCC what you need, and then...
-
-```typescript
-await tx.completeInputsByCapacity(signer);
-await tx.completeFeeBy(signer, 1000); // Transaction fee rate
-const txHash = await signer.sendTransaction(tx);
-```
-
-We have done everything!
-
 ## Installing
 
 We design CCC for both front-end and back-end developers. You need only one package to fulfil all your needs:
 
 - [NodeJS](https://www.npmjs.com/package/@ckb-ccc/core): `npm install @ckb-ccc/core`
 - [Custom UI](https://www.npmjs.com/package/@ckb-ccc/ccc): `npm install @ckb-ccc/ccc`
 - [Web Component](https://www.npmjs.com/package/@ckb-ccc/connector): `npm install @ckb-ccc/connector`
-- [React](https://www.npmjs.com/package/@ckb-ccc/connector-react): `npm install @ckb-ccc/connector-react`
+- [React](https://www.npmjs.com/package/@ckb-ccc/connector-react) ([Docs](https://docs.ckbccc.com/modules/_ckb_ccc_connector_react.html)): `npm install @ckb-ccc/connector-react`
 
 CCC exports everything on the `ccc` object:
 
@@ -84,6 +64,26 @@ For advanced developers, we provided the `cccA` object to fulfil all your needs.
 import { cccA } from "@ckb-ccc/<package-name>/advanced";
 ```
 
+## Transaction Composing
+
+Here's an example for transferring CKB:
+
+```typescript
+const tx = ccc.Transaction.from({
+ outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom(amount) }],
+});
+```
+
+Tell CCC what you need, and then...
+
+```typescript
+await tx.completeInputsByCapacity(signer);
+await tx.completeFeeBy(signer, 1000); // Transaction fee rate
+const txHash = await signer.sendTransaction(tx);
+```
+
+We have done everything!
+
 ## Documents
 
 Check our [full documents for all detailed APIs](https://docs.ckbccc.com).
@@ -138,6 +138,16 @@ CCC uses JS's [Package Entry Points](https://nodejs.org/api/packages.html#packa
 
 Read the [TypeScript's Guide](https://www.typescriptlang.org/docs/handbook/modules/reference.html#packagejson-exports) for more.
 
+### TypeError: (0, react....createContext) is not a function
+
+CCC UI only works on the client side. If you are using the [React Server Component](https://react.dev/reference/rsc/use-client), add
+
+```tsx
+"use client";
+```
+
+at the beginning of files using `ccc.Provider`.
+
 ### Can I use Lumos with CCC?
 
 While we recommend using CCC for composing transactions, we also provide Lumos patches to:

packages/connector-react/README.md

@@ -43,6 +43,18 @@
 
 This project is still under active development, and we are looking forward to your feedback. [Try its demo now here](https://app.ckbccc.com/). It showcases how to use CCC for some basic scenarios in CKB.
 
+## Use the Connector UI
+
+Before using the Connector, wrap your UI with the CCC Provider:
+
+```tsx
+<ccc.Provider>
+ {/* Your application */}
+</ccc.Provider>
+```
+
+Check [the document for @ckb-ccc/connector-react](https://docs.ckbccc.com/modules/_ckb_ccc_connector_react.index.ccc.html) for more information.
+
 <h3 align="center">
  Read more about CCC on <a href="https://docs.ckbccc.com">our website</a> or <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.
 </h3>