리믹스와 함께 Mantine NavigationProgress 사용

7312 단어 tutorialwebdevreactjavascript
오늘 우리는 리믹스 애플리케이션에서 NavigationProgress component from Mantine.dev을 구현하는 방법을 배울 것입니다. 구성 요소는 일부 비동기 프로세스(콘텐츠 로드, 탐색, 양식 제출)가 발생했음을 나타내는 데 사용됩니다.

<NavigationProgress> 사용



Mantine에는 구성 요소 상태와 상호 작용하기 위한 단일 구성 요소 및 일부 유틸리티 기능이 포함된 @mantine/nprogress라는 추가 패키지가 있습니다. 아직 설치하지 않은 경우follow the installation instructions first .

진행률 표시줄을 트리거하여 증가하기 시작하는 기능startNavigationProgress과 진행률 표시줄을 재설정하고 숨기는 기능resetNavigationProgress에만 관심이 있습니다. UI가 로드 또는 제출 상태에 있을 때마다 진행을 시작하고 UI가 유휴 상태로 돌아갈 때마다 진행을 재설정하도록 이들을 Remix에 연결합니다.

구성 요소<NavigationProgress>는 기본적으로 React Portal에서 진행률 표시줄을 렌더링합니다. 뷰포트 상단에서 렌더링하는 경우에는 괜찮지만 그렇지 않으면 렌더링해야 할 수 있습니다adjust some of the default props.

리믹스 useTransition 후크



Remix는 응용 프로그램에서 로더 또는 작업의 현재 상태를 노출하는 후크useTransition를 제공합니다. 후크는 전환 유형, 다음 위치 등 전환에 대한 많은 데이터를 노출하지만 우리는 state에만 관심이 있습니다. 전환이 발생하지 않는 경우state는 "idle"가 되고 그렇지 않은 경우 전환 유형에 따라 "loading" 또는 "submitting"가 됩니다.

<GlobalLoadingIndicator> 컴포넌트 구현



이 지식을 사용하여 Remix 전환과 NavigationProgress를 함께 연결하는 작은 구성 요소를 만들 수 있습니다.

import { useEffect } from "react";
import { useTransition } from "@remix-run/react";
import {
  NavigationProgress,
  resetNavigationProgress,
  startNavigationProgress,
} from "@mantine/nprogress";

export const GlobalLoadingIndicator = () => {
  const { state } = useTransition();
  useEffect(() => {
    if (state === "idle") {
      // we are idle so hide the progress bar
      resetNavigationProgress();
    } else {
      // we are doing something so show the progress bar
      // and allow it to increment
      startNavigationProgress();
    }
  }, [state]);

  // I set the stepInterval to 100 so it increases every 100 milliseconds
  // but you can set it to something that feels nice for your app
  return <NavigationProgress stepInterval={100} />;
};


새 구성 요소 사용



앱에 진행률 표시줄을 포함하는 마지막 단계는 항상 볼 수 있는 위치에 레이아웃에 <GlobalLoadingIndicator> 구성 요소를 렌더링하는 것입니다. 제 경우에는 <MantineProvider> 의 root.tsx 내부에 렌더링합니다.

    <html lang="en">
      <head>
        <Meta />
        <Links />
        <StylesPlaceholder />
      </head>
      <body style={{ margin: 0 }}>
        <MantineProvider
          theme={{ colorScheme: "light" }}
          withGlobalStyles
          withNormalizeCSS
        >
          {/* Your usage may differ */}
          <GlobalLoadingIndicator />
          <Outlet />
        </MantineProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>


좋습니다. 이제 Remix 애플리케이션에 NavigationProgress 구성요소의 기본 구현이 있습니다! 구성 요소 소품을 가지고 놀고 다양한 전환 유형에 반응하여 적합하다고 생각하는 경험을 개선할 수 있습니다.
React 맵 라이브러리 개요 + react-leaflet 전체 설치 디버깅 가이드
[알고리즘] 8 - 유효한 이진 검색 트리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage