matsuri-hooks v3.1.0

Matsuri Hooks

• Matsuri Hooks
  • Motivation
  • Usage
    • Installation
  • Examples
    • useFetch
      • Conditional fetch
      • 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

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,
);

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>
);