@esmate/react

A collection of React components, hooks combining the power of Alibaba's ahooks library with custom ESMate utilities for modern React development.

Alibaba Hooks

Import hooks from the popular ahooks library through a convenient subpath:

import { usePagination, useRequest } from "@esmate/react/ahooks";

📚 Documentation: ahooks reference

ESMate Hooks

Custom hooks developed by ESMate for common React patterns:

import { useImmerState, useSearchParams } from "@esmate/react/hooks";

📚 Documentation: View source

useImmerState()

A state management hook powered by Immer that enables immutable state updates through a mutable API. Write simpler, more intuitive state updates without manually spreading objects.

import { useImmerState } from "@esmate/react/hooks";

interface State {
  name: string;
  age: number;
}

export function Person() {
  const [state, setState] = useImmerState<State>({
    name: "John",
    age: 30,
  });

  return (
    <div>
      <p>
        Name: {state.name}, Age: {state.age}
      </p>
      <button
        onClick={() =>
          setState((draft) => {
            draft.age += 1;
          })
        }
        type="button"
      >
        Change Age
      </button>
    </div>
  );
}

useSearchParams()

A sensor hook that reactively tracks URL search parameters, automatically updating when the browser's location changes.

import { useSearchParams } from "@esmate/react/hooks";

export function Search() {
  const searchParams = useSearchParams();
  return <div>{searchParams.get("q")}</div>;
}

Note: This hook is incompatible with hash-based routing (such as react-router's <HashRouter>). Since search parameters in hash routes are treated as part of the URL hash by browsers, they cannot be accessed through this hook.

ESMate Store

Create a Zustand store with the Immer middleware enabled, allowing immutable state updates through a mutable API.

import { createImmerStore } from "@esmate/react/store";

interface Store {
  person: {
    name: string;
    age: number;
  };
  incrementAge: () => void;
  decrementAge: () => void;
}

const useStore = createImmerStore<Store>((set) => ({
  person: {
    name: "John",
    age: 30,
  },
  incrementAge: () => set((draft) => draft.person.age++),
  decrementAge: () => set((draft) => draft.person.age--),
}));

export function Person() {
  const { person, incrementAge, decrementAge } = useStore();

  return (
    <div>
      <p>
        Name: {person.name}, Age: {person.age}
      </p>
      <button onClick={incrementAge} type="button">
        Increment Age
      </button>
      <button onClick={decrementAge} type="button">
        Decrement Age
      </button>
    </div>
  );
}

📚 Documentation: View source