react-use-echarts 0.0.9 → 0.0.11

package/README.md

@@ -16,7 +16,8 @@ A powerful React hooks library for Apache ECharts, making it easy to use ECharts
 - 📦 **Lightweight** - Zero dependencies except for React and ECharts
 - 🛠 **Flexible** - Full access to ECharts instance and options
 - ⚡ **Auto-updating** - Automatically updates chart when data or options change
-- 📱 **Responsive** - Handles container resizing automatically
+- 📱 **Responsive** - Handles container resizing automatically with ResizeObserver
+- 🎯 **Event handling** - Easy to use event system with flexible configuration
 
 ## 📦 Installation
 
@@ -34,10 +35,15 @@ pnpm add react-use-echarts echarts
 ## 🔨 Usage
 
 ```tsx
-import { useEcharts, UseEchartsOptions } from 'react-use-echarts';
+import React from 'react';
+import { useEcharts } from 'react-use-echarts';
+import type { EChartsOption } from 'echarts';
 
 function MyChart() {
-  const options: UseEchartsOptions['option'] = {
+  const options: EChartsOption = {
+    title: {
+      text: 'Basic Line Chart Example'
+    },
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -47,7 +53,8 @@ function MyChart() {
     },
     series: [{
       data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line'
+      type: 'line',
+      smooth: true
     }]
   };
 
@@ -55,7 +62,7 @@ function MyChart() {
     option: options
   });
 
-  return <div ref={chartRef} style={{ width: '100%', height: '300px' }} />;
+  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
 }
 ```
 
@@ -66,14 +73,17 @@ function MyChart() {
 The main hook for using ECharts in React components.
 
 ```tsx
+import type { EChartsOption } from 'echarts';
+import type { UseEchartsOptions } from 'react-use-echarts';
+
 const { chartRef, setOption, getInstance } = useEcharts({
-  option: UseEchartsOptions['option'];      // 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
+  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;
@@ -99,4 +109,4 @@ Detailed changes for each release are documented in the [release notes](https://
 
 ## 📄 License
 
-[MIT](./LICENSE.txt) © [chin](https://github.com/chensid)
+[MIT](./LICENSE.txt) © [Ethan](https://github.com/chensid)

package/dist/index.es.js

@@ -1,45 +1,40 @@
-import { useRef as z, useCallback as f, useEffect as C } from "react";
-import * as R from "echarts";
-const w = ({
+import { useRef as v, useCallback as a, useEffect as u } from "react";
+import * as k from "echarts";
+const M = ({
   /** Chart configuration */
-  option: a,
+  option: f,
   /** Theme name */
   theme: i,
   /** Skip merging with previous options */
-  notMerge: d = !1,
+  notMerge: l = !1,
   /** Enable lazy update mode */
-  lazyUpdate: l = !1,
+  lazyUpdate: b = !1,
   /** Display loading animation */
   showLoading: p = !1,
   /** Loading animation config */
   loadingOption: O,
   /** Event handlers map */
-  onEvents: c
+  onEvents: s
 }) => {
-  const s = z(null), n = z(void 0), k = () => n.current, b = f(() => ({
-    option: a,
-    theme: i,
-    notMerge: d,
-    lazyUpdate: l,
-    showLoading: p,
-    loadingOption: O,
-    onEvents: c
-  }), [
-    a,
-    i,
-    d,
-    l,
-    p,
-    O,
-    c
-  ]), o = f(() => {
-    if (s.current && !n.current) {
-      const e = R.init(s.current, i);
+  const c = v(null), n = v(void 0), C = () => n.current, d = a(
+    () => ({
+      option: f,
+      theme: i,
+      notMerge: l,
+      lazyUpdate: b,
+      showLoading: p,
+      loadingOption: O,
+      onEvents: s
+    }),
+    [f, i, l, b, p, O, s]
+  ), o = a(() => {
+    if (c.current && !n.current) {
+      const e = k.init(c.current, i);
       n.current = e;
-      const r = b();
+      const r = d();
       return r.onEvents && Object.entries(r.onEvents).forEach(
-        ([t, { handler: u, query: g, context: h }]) => {
-          g ? e.on(t, g, u, h) : e.on(t, u, h);
+        ([t, { handler: h, query: g, context: z }]) => {
+          g ? e.on(t, g, h, z) : e.on(t, h, z);
         }
       ), r.showLoading ? e.showLoading(r.loadingOption) : e.hideLoading(), e.setOption(r.option, {
         notMerge: r.notMerge,
@@ -47,7 +42,7 @@ const w = ({
       }), e;
     }
     return n.current;
-  }, [b, i]), M = f(
+  }, [d, i]), R = a(
     (e, r) => {
       queueMicrotask(() => {
         const t = n.current || o();
@@ -56,25 +51,33 @@ const w = ({
     },
     [o]
   );
-  return C(() => {
+  return u(() => {
     const e = n.current;
-    if (!e) return;
-    const r = new ResizeObserver(() => {
-      e.resize();
-    });
-    return r.observe(s.current), () => {
-      r.disconnect(), c && e && Object.entries(c).forEach(([t, { handler: u }]) => {
-        e.off(t, u);
-      }), e.dispose(), n.current = void 0;
+    if (!e || !c.current) return;
+    let r;
+    try {
+      r = new ResizeObserver(() => {
+        e.resize();
+      }), r.observe(c.current);
+    } catch (t) {
+      console.warn("ResizeObserver not available:", t);
+    }
+    return () => {
+      r?.disconnect();
     };
-  }, [n, c]), C(() => {
-    s.current && queueMicrotask(o);
-  }, [s, o]), {
-    chartRef: s,
-    setOption: M,
-    getInstance: k
+  }, []), u(() => {
+    c.current && queueMicrotask(o);
+  }, [c, o]), u(() => () => {
+    const e = n.current;
+    e && (s && Object.entries(s).forEach(([r, { handler: t }]) => {
+      e.off(r, t);
+    }), e.dispose(), n.current = void 0);
+  }, [s]), {
+    chartRef: c,
+    setOption: R,
+    getInstance: C
   };
 };
 export {
-  w as useEcharts
+  M as useEcharts
 };

package/dist/index.umd.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-use-echarts",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A powerful React hooks library for Apache ECharts",
   "keywords": [
     "react",
@@ -12,7 +12,7 @@
     "typescript"
   ],
   "type": "module",
-  "author": "chin",
+  "author": "Ethan",
   "license": "MIT",
   "publishConfig": {
     "access": "public",
@@ -41,29 +41,29 @@
     "dist"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.22.0",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.10",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/coverage-v8": "3.0.8",
-    "echarts": "^5.6.0",
-    "eslint": "^9.22.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "jsdom": "^26.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "~5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.1",
-    "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.8"
+    "@eslint/js": "^9.38.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.9.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "@vitest/coverage-v8": "3.2.4",
+    "echarts": "^6.0.0",
+    "eslint": "^9.38.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.4.0",
+    "jsdom": "^27.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^7.1.11",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0 || ^6.0.0",
     "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1 || ^19.0.0"
   },