useFavicon

useFavicon (파비콘 변경)

useFavicon 훅은 useLayoutEffect에서 주어진 favicon으로 head 요소에 <link> 태그를 추가해 파비콘을 변경해요. 서버 사이드 렌더링 중에는 호출되지 않아요.

출처: 문서

본문

useFavicon 훅은 useLayoutEffect에서 주어진 favicon으로 head에 <link> 요소를 추가해요. 이 훅은 서버 사이드 렌더링 중에는 호출되지 않아요.

파비콘으로 설정할 URL(지원 형식: .ico, .png, .svg, .gif)을 인자로 넘겨 호출해요. URL이 변경될 때마다 실행되며, 값이 빈 문자열(뒤의 공백은 제거됨)이나 null이 아닐 때 동작해요.

import { useState } from 'react';
import { useFavicon } from '@mantine/hooks';
import { Group, Button } from '@mantine/core';

function Demo() {
  const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
  const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
  const setMantineUIFavicon = () => setFavicon('https://ui.mantine.dev/favicon.svg');

  useFavicon(favicon);

  return (
    <Group>
      <Button onClick={setMantineFavicon}>Mantine favicon</Button>
      <Button onClick={setMantineUIFavicon}>Mantine UI favicon</Button>
    </Group>
  );
}

정의 (Definition)

function useFavicon(url: string): void;

더 알아보기 (Learn more)