Matsuri Hooks

• Matsuri Hooks
  • Motivation
  • Usage
    • Installation
  • Examples
    • useFetch
      • Conditional fetch
      • Auto refetch
      • Convenient errors
    • useAuthFetch
    • useIntersectionObserver
    • useOnClickOutside
    • useKeyboardShortcut
    • useClipboardCopy

Motivation

• Provide complex processing with safety guaranteed by testing
• Be common processing for each product

Usage

Installation

yarn add matsuri-hooks swr

Examples

useFetch

const { data, error, refetch } = useFetch<{ species: "fish" }>(
  "https://example.com/fish",
  { method: "GET" },
);

return (
  <div>
    <p>Species: {data?.species}</p>
    <button onClick={refetch}>Refetch</button>
    {error ? (
      <p>
        {error.name}: {error.message}
      </p>
    ) : null}
  </div>
);

Conditional fetch

const [prefId, setPrefId] = useState<string>();
const { data } = useFetch<{ cityId: string }[]>(
  prefId ? `https://example.com/${prefId}/cities` : null,
);

Auto refetch

keyを指定することで、keyが変わった際に再取得される。

const { data: prefecture, refetch } = useFetch<Prefectrue>(getPrefecture());
const { data: cities } = useFetch<City[]>(getCities(), { key: prefecture?.id });

// keyで紐づけられているため、prefectureがidが変わっていればcitiesも再取得される
refetch();

Convenient errors

Errorオブジェクトからレスポンスのステータスを取得できる。

const { error } = useFetch<Response>("https://example.com/fish");

if (error.status === 404) {
  console.log("Not Found Error");
}

Responseがfalsyであり且つJSONフレンドリーであればパースした結果を受け取れる。

const { error } = useFetch<Response>("https://example.com/fish");

console.log(error.message)
// 500: {errorType: too_many_fish}

if(error.parse()?.errorType === "too_many_fish){
  console.log("Too many fish")
}

パースされた結果に型を当てることも出来る。

type ErrorType = "too_many_fish" | "not_found_fish";
interface ParsedError {
  errorType: ErrorType;
}
const { error } = useFetch<Response, ParsedError>("https://example.com/fish");

useAuthFetch

This default token format is X-Access-Token: [TOKEN].

const { token } = useAuth()
const { error, refetch } = useAuthFetch<never>(token, "https://example.com", { method: "POST", ... )

• useAuthBearerFetch：this default token format is Authorization: Bearer [TOKEN].

useIntersectionObserver

const ref = useRef(null);
const { entry, disconnect } = useIntersectionObserver(ref, { threshold: 0.1 });

const [image, setImage] = useState<string>();

useEffect(() => {
  if (entry) {
    const fetchImage = async () => {
      //...
      return image;
    };
    disconnect();
    setImage(fetchImage());
  }
}, []);

return <img ref={ref} src={image || "dummy.png"} />;

useOnClickOutside

const [open, setOpen] = useState(false);
const ref = useRef(null);
useOnClickOutside(ref, () => {
  setOpen(false);
});
return (
  <div>
    <button onClick={() => setOpen(true)}>OPEN</button>
    <Modal ref={ref} open={open} />
  </div>
);

useKeyboardShortcut

If the specified key and control or meta key are pressed together, the second argument callback is executed.

const [open, setOpen] = useState(false);
const ref = useRef(null);
useKeyboardShortcut("j", () => {
  setOpen(true);
});
return (
  <div>
    <Modal ref={ref} open={open} />
  </div>
);

useClipboardCopy

If the specified key is pressed together with a control or meta key, or if the return method is called, the specified text is copied to clipboard. Then, if the copy fails, onFailure is called, and if it succeeds, onSuccess is called.

const [open, setOpen] = useState(false);
const ref = useRef(null);
const copy = useKeyboardShortcut(SOME_TOKEN, {
  key: "j",
  onSuccess: () => {
    addAlert("Success");
  },
  onFailure: () => {
    addAlert("Failed", { type: "error" });
  },
});
return (
  <div>
    <Button onClick={copy} />
  </div>
);