heitu

React utility library — hooks, canvas engine & form renderer.

Install

npm install heitu
# or
pnpm add heitu

Modules

Hooks

19 React Hooks for async, storage, DOM observation, WebSocket, polling, etc.

import { useAsyncFn, useCookie, useCountDown } from 'heitu/hooks'

// or import from root
import { useAsyncFn } from 'heitu'

| Hook | Description | |------|-------------| | useAsyncFn | Async function with loading/error state | | useCancelAsyncFn | Cancellable async function | | useCookie | Cookie read/write (requires js-cookie) | | useCountDown | Countdown timer | | useDeepCompareEffect | Deep-compare version of useEffect | | useDevicePixelRatio | Track device pixel ratio | | useElementSize | Observe element dimensions | | useImageLoad | Image loading state | | useInfiniteScroll | Infinite scroll with pagination | | useInView | IntersectionObserver hook | | useLocalStorage | localStorage with React state | | usePolling | Interval polling with start/stop | | usePrevious | Previous value of a state | | useResizeObserver | ResizeObserver hook | | useSessionStorage | sessionStorage with React state | | useWebSocket | WebSocket connection management | | useWindowSize | Track window dimensions | | useHtAxios | Axios wrapper (requires axios) | | createContainer | Shared state container |

Canvas

Lightweight Canvas 2D engine with shapes, groups, animation, drag & events.

import { Stage, Rect, Circle, Text, Line, Group, Custom, Animate } from 'heitu'

const stage = new Stage()
// Events are bound inside buildContentDOM — there is no separate bindEvent() call
stage.buildContentDOM({ container: hostElement, width: 600, height: 400 })

const rect = new Rect({ x: 10, y: 10, width: 100, height: 60, fillStyle: '#22C55E' })
rect.draggable = true                 // drag is a property, not a constructor option
rect.on('click', ({ evt }) => console.log(evt))

stage.add(rect as never)              // see note below on typing
stage.batchDraw(stage)                // add() only enqueues — draw the first frame yourself

const anim = new Animate({ x: 10 }, { x: 300 }, {
  duration: 800,
  easing: 'cubicInOut',
  during: (_percent, state) => rect.attr({ x: Number(state.x) }),
  done: () => console.log('finished'),   // since 1.1.1
})
anim.start()
// anim.abort() cancels and fires the `aborted` callback (since 1.1.1)

stage.destroy()                       // always destroy on unmount

Typing note: stage.add() expects ChildType, which shape classes don't fully declare. Under strict mode use Parameters<Stage['add']>[number] as the assertion target instead of never if you want a named type.

Charts

Four canvas-drawn charts built on the canvas engine — no G2/ECharts dependency.

import { LineChartComponent, BarChartComponent, PieChartComponent, BarLineChartComponent } from 'heitu'

<LineChartComponent data={data} xField="month" yField="sales" height={320} smooth />
<BarChartComponent data={data} xField="category" yField="value" />
<PieChartComponent data={data} angleField="value" colorField="type" innerRadius={0.6} />
<BarLineChartComponent data={data} xField="month" yFieldBar="volume" yFieldLine="rate" />

The LineChart / BarChart / PieChart / BarLineChart named exports are the imperative classes (new LineChart({ container, ... })); the *Component exports are the React wrappers.

Since 1.1.1 the React wrappers observe their container: if it has zero width on the first frame (common inside flex/grid), the chart waits for a real width instead of rendering a blank canvas, and rebuilds when the width changes. Passing an explicit width skips the observation.

Components

JSON Schema-driven form renderer based on Ant Design Form.

import { FormRender } from 'heitu/components'

const config = [
  { type: 'Input', name: 'username', label: 'Username' },
  { type: 'Select', name: 'role', label: 'Role', nodeProps: {
    options: [{ label: 'Admin', value: 'admin' }, { label: 'User', value: 'user' }]
  }},
]

export default () => {
  const [form] = FormRender.useForm()
  return <FormRender form={form} config={config} onFinish={console.log} />
}

Features: watch linking, async service, conditional visibility, custom components (global register + scoped Provider), dividers, nested sub-forms, 19 built-in controls.

Requires antd >= 5.0.0 as peer dependency.

Peer Dependencies

| Package | Required | Used by | |---------|----------|---------| | react / react-dom | Yes | All | | antd | Optional | heitu/components | | axios | Optional | useHtAxios | | js-cookie | Optional | useCookie | | urijs | Optional | URL utilities |

Development

pnpm install        # install dependencies
pnpm dev            # start dev server (dumi)
pnpm build          # build library
pnpm test           # run tests
pnpm docs:build     # build docs site

License

MIT