From 738686bf6182a82fb56b4b84884d07949f1a9ca2 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Tue, 26 Sep 2023 11:21:06 +0800
Subject: [PATCH] Update README

---
 README.md | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index a401491..824b19b 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,6 @@
 # @berryv/g2-react
 
-> WIP
-
-The lightweight [React](https://react.dev/) component for [@antv/g2 5.0](https://github.com/antvis/G2).
+The lightweight [React](https://react.dev/) component for [@antv/g2 5.0](https://github.com/antvis/G2), which is based on the [Spec API](https://g2.antv.antgroup.com/manual/core/api).
 
 ## Installing
 
@@ -40,7 +38,7 @@ export function Demo() {
 | Property | Description                                                                                                     | Type                  | Default |
 | -------- | --------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
 | options  | the [options](https://g2.antv.antgroup.com/manual/core/api) for the visualization, say `chart.options(options)` | `G2options` \| `null` | -       |
-| renderer | the [renderer](https://g.antv.antgroup.com/api/renderer/intro) of @antv/g canvas.                               | `ChartOptions`        | -       |
+| renderer | the [renderer](https://g.antv.antgroup.com/api/renderer/intro) of @antv/g canvas                                | `ChartOptions`        | -       |
 | style    | the style of the container                                                                                      | `CSSProperties`       | -       |
 | onInit   | the callback called after the chart instantiating                                                               | `Function`            | -       |
 | ref      | the ref for the [chart instance](https://g2.antv.antgroup.com/manual/core/chart)                                | `ChartRef`            | -       |
@@ -48,13 +46,15 @@ export function Demo() {
 ## Examples
 
 - [Creating Chart](#creating-chart)
-- [Fetching Data](#fetching-data)
+- [Fetching Data](#updating-data)
 - [Handling Events](#handling-events)
 - [Customizing Component](#customizing-component)
 - [Styling Container](#styling-container)
 
 ## Creating Chart
 
+For more examples for `props.options`, see each [G2 example](https://g2.antv.antgroup.com/examples) and click the "Spec Tab".
+
 ```js
 import React from "react";
 import { Chart } from "@berryv/g2-react";
@@ -83,7 +83,9 @@ export function Demo() {
 }
 ```
 
-### Fetching Data
+### Updating Data
+
+Using `useMemo` to define a computed options with data as a decency, this allows rerendering chart after the data updating.
 
 ```js
 import React, { useState, useMemo } from "react";
@@ -122,6 +124,8 @@ export function Demo() {
 
 ### Handling Events
 
+`<Chart/>` exposes the ref for the G2 [chart instance](https://g2.antv.antgroup.com/manual/core/chart), which can be used to handle events or get some instances, such as scale, coordinate, etc,.
+
 ```js
 import React, { useRef, useEffect } from "react";
 import { ChartEvent } from "@antv/g2";
@@ -153,6 +157,8 @@ export function Demo() {
 
 ### Customizing Component
 
+With the `register` API of G2, you can customize visual component and using it in options, such as customizing a triangle shape for bar chart:
+
 ```js
 import React, { useRef, useEffect } from "react";
 import { register } from "@antv/g2";
@@ -203,6 +209,8 @@ export function Demo() {
 
 ### Styling Container
 
+Define the css styles of the container:
+
 ```js
 import React from "react";
 import { Chart } from "@berryv/g2-react";