react-use-echarts 0.0.3 → 0.0.4

package/README.md

@@ -31,7 +31,7 @@ pnpm add react-use-echarts echarts
 ## 🔨 Usage
 
 ```tsx
-import { useECharts } from 'react-use-echarts';
+import { useEcharts } from 'react-use-echarts';
 
 function MyChart() {
   const options = {
@@ -48,7 +48,9 @@ function MyChart() {
     }]
   };
 
-  const { chartRef } = useECharts(options);
+  const { chartRef } = useEcharts({
+    option: options
+  });
 
   return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
 }
@@ -56,25 +58,33 @@ function MyChart() {
 
 ## 📖 API
 
-### useECharts
+### useEcharts
 
 The main hook for using ECharts in React components.
 
 ```tsx
-const { chartRef, instance, setOption } = useECharts(options, theme?, opts?);
+const { chartRef, setOption, getInstance } = useEcharts({
+  option: EChartsOption;      // ECharts options configuration (required)
+  theme?: string | object;    // ECharts theme name or configuration
+  notMerge?: boolean;        // Whether to not merge with previous options
+  lazyUpdate?: boolean;      // Whether to update chart lazily
+  showLoading?: boolean;     // Whether to display loading animation
+  loadingOption?: object;    // Loading animation configuration
+  onEvents?: {              // Event handlers
+    [eventName: string]: {
+      handler: (params: any) => void;
+      query?: string | object;
+      context?: object;
+    }
+  }
+});
 ```
 
-#### Parameters
-
-- `options` (required): ECharts options configuration
-- `theme` (optional): ECharts theme name or configuration
-- `opts` (optional): ECharts initialization options
-
 #### Returns
 
 - `chartRef`: Ref object to attach to the chart container
-- `instance`: ECharts instance (available after component mounts)
 - `setOption`: Function to update chart options
+- `getInstance`: Function to get the ECharts instance (available after component mounts)
 
 ## 🤝 Contributing
 

package/dist/index.d.ts

@@ -70,7 +70,7 @@ export declare type Theme = string | object | null;
  *
  * @example
  * ```typescript
- * const { chartRef, setOption, getInstance } = useECharts({
+ * const { chartRef, setOption, getInstance } = useEcharts({
  *   option: {
  *     xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  *     yAxis: { type: 'value' },
@@ -86,13 +86,13 @@ export declare type Theme = string | object | null;
  * return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
  * ```
  */
-export declare const useECharts: ({ option, theme, notMerge, lazyUpdate, showLoading, loadingOption, onEvents, }: UseEChartsOptions) => UseEChartsReturn;
+export declare const useEcharts: ({ option, theme, notMerge, lazyUpdate, showLoading, loadingOption, onEvents, }: UseEchartsOptions) => UseEchartsReturn;
 
 /**
- * Configuration options for useECharts hook
- * useECharts hook 的配置选项
+ * Configuration options for useEcharts hook
+ * useEcharts hook 的配置选项
  */
-export declare interface UseEChartsOptions {
+export declare interface UseEchartsOptions {
     /**
      * ECharts configuration options
      * ECharts 的配置项
@@ -134,10 +134,10 @@ export declare interface UseEChartsOptions {
 }
 
 /**
- * Return type for useECharts hook
- * useECharts hook 的返回类型
+ * Return type for useEcharts hook
+ * useEcharts hook 的返回类型
  */
-export declare interface UseEChartsReturn {
+export declare interface UseEchartsReturn {
     /**
      * Reference to the chart container element
      * 图表容器元素的引用

package/dist/index.es.js

@@ -80,5 +80,5 @@ const x = ({
   };
 };
 export {
-  x as useECharts
+  x as useEcharts
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("echarts")):typeof define=="function"&&define.amd?define(["exports","react","echarts"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["react-use-echarts"]={},n.React,n.echarts))})(this,function(n,t,y){"use strict";function m(c){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const o=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(f,u,o.get?o:{enumerable:!0,get:()=>c[u]})}}return f.default=c,Object.freeze(f)}const g=m(y),w=({option:c,theme:f,notMerge:u=!1,lazyUpdate:o=!1,showLoading:h=!1,loadingOption:p,onEvents:a})=>{const l=t.useRef(null),e=t.useRef(),E=t.useCallback(()=>e.current,[]),R=t.useCallback((r,s)=>{var i;(i=e.current)==null||i.setOption(r,s)},[]);return t.useEffect(()=>{if(l.current)return e.current||(e.current=g.init(l.current,f)),a&&e.current&&Object.entries(a).forEach(([r,s])=>{var O,j;const{handler:i,query:d,context:b}=s;d?(O=e.current)==null||O.on(r,d,i,b):(j=e.current)==null||j.on(r,i,b)}),()=>{e.current&&(a&&Object.entries(a).forEach(([r,s])=>{var d;const{handler:i}=s;(d=e.current)==null||d.off(r,i)}),e.current.dispose(),e.current=void 0)}},[f,a]),t.useEffect(()=>{e.current&&(h?e.current.showLoading(p):e.current.hideLoading(),e.current.setOption(c,{notMerge:u,lazyUpdate:o}))},[c,u,o,h,p]),t.useEffect(()=>{const r=()=>{var s;(s=e.current)==null||s.resize()};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[]),{chartRef:l,setOption:R,getInstance:E}};n.useECharts=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("echarts")):typeof define=="function"&&define.amd?define(["exports","react","echarts"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["react-use-echarts"]={},n.React,n.echarts))})(this,function(n,t,y){"use strict";function m(c){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const o=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(f,u,o.get?o:{enumerable:!0,get:()=>c[u]})}}return f.default=c,Object.freeze(f)}const g=m(y),w=({option:c,theme:f,notMerge:u=!1,lazyUpdate:o=!1,showLoading:h=!1,loadingOption:p,onEvents:a})=>{const l=t.useRef(null),e=t.useRef(),E=t.useCallback(()=>e.current,[]),R=t.useCallback((r,s)=>{var i;(i=e.current)==null||i.setOption(r,s)},[]);return t.useEffect(()=>{if(l.current)return e.current||(e.current=g.init(l.current,f)),a&&e.current&&Object.entries(a).forEach(([r,s])=>{var O,j;const{handler:i,query:d,context:b}=s;d?(O=e.current)==null||O.on(r,d,i,b):(j=e.current)==null||j.on(r,i,b)}),()=>{e.current&&(a&&Object.entries(a).forEach(([r,s])=>{var d;const{handler:i}=s;(d=e.current)==null||d.off(r,i)}),e.current.dispose(),e.current=void 0)}},[f,a]),t.useEffect(()=>{e.current&&(h?e.current.showLoading(p):e.current.hideLoading(),e.current.setOption(c,{notMerge:u,lazyUpdate:o}))},[c,u,o,h,p]),t.useEffect(()=>{const r=()=>{var s;(s=e.current)==null||s.resize()};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[]),{chartRef:l,setOption:R,getInstance:E}};n.useEcharts=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-use-echarts",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A powerful React hooks library for Apache ECharts",
   "keywords": [
     "react",