SEED Design

Pull To Refresh

사용자가 화면을 아래로 당겨 콘텐츠를 새로고침할 수 있게 해주는 컴포넌트입니다. 모바일 환경에서 최신 콘텐츠를 불러올 때 사용됩니다.

import { AppBar, AppScreen } from "@seed-design/stackflow";
import { ActivityComponentType } from "@stackflow/react/future";
import { VStack } from "@seed-design/react";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";

declare module "@stackflow/config" {
  interface Register {
    "react/pull-to-refresh/preview": unknown;
  }
}

const PullToRefreshPreview: ActivityComponentType<"react/pull-to-refresh/preview"> = () => {
  // AppScreen is imported from @seed-design/stackflow instead of snippet for demo purpose.
  // AppScreen snippet is integrating PullToRefresh, so it's not necessary to use it here.
  return (
    <AppScreen.Root>
      <AppBar.Root divider>
        <AppBar.Main>
          <AppBar.Title>Pull To Refresh</AppBar.Title>
        </AppBar.Main>
      </AppBar.Root>
      <PullToRefreshRoot
        asChild
        onPtrReady={() => {}}
        onPtrRefresh={async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
        }}
      >
        <AppScreen.Layer>
          <PullToRefreshIndicator />
          <PullToRefreshContent asChild>
            <VStack px="spacingX.globalGutter">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
              reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
              accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
            </VStack>
          </PullToRefreshContent>
        </AppScreen.Layer>
      </PullToRefreshRoot>
    </AppScreen.Root>
  );
};

export default PullToRefreshPreview;

Installation

npx @seed-design/cli@latest add ui:pull-to-refresh

Props

PullToRefreshRoot

Prop

Type

PullToRefreshIndicator

Prop

Type

PullToRefreshContent

Prop

Type

Examples

PTR in Tabs

import { VStack } from "@seed-design/react";
import { ActivityComponentType } from "@stackflow/react/future";
import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

declare module "@stackflow/config" {
  interface Register {
    "react/pull-to-refresh/tabs": unknown;
  }
}

const PullToRefreshTabs: ActivityComponentType<"react/pull-to-refresh/tabs"> = () => {
  return (
    <AppScreen>
      <AppBar>
        <AppBarMain>Pull To Refresh</AppBarMain>
      </AppBar>
      <AppScreenContent>
        <TabsRoot defaultValue="1" contentLayout="fill">
          <TabsList>
            <TabsTrigger value="1">Tab 1</TabsTrigger>
            <TabsTrigger value="2">Tab 2</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <PullToRefreshRoot
              onPtrReady={() => {}}
              onPtrRefresh={async () => {
                await new Promise((resolve) => setTimeout(resolve, 1000));
              }}
            >
              <PullToRefreshIndicator />
              <PullToRefreshContent asChild>
                <VStack px="spacingX.globalGutter">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
                  reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
                  accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
                </VStack>
              </PullToRefreshContent>
            </PullToRefreshRoot>
          </TabsContent>
          <TabsContent value="2">
            <VStack px="spacingX.globalGutter">PTR is not available in this tab.</VStack>
          </TabsContent>
        </TabsRoot>
      </AppScreenContent>
    </AppScreen>
  );
};

export default PullToRefreshTabs;

Disabled

disabled 속성을 사용하여 PTR를 비활성화할 수 있습니다.

import { Box, HStack, Text } from "@seed-design/react";
import { useState } from "react";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";
import { Switch } from "seed-design/ui/switch";

const PullToRefreshDisabled = () => {
  const [disabled, setDisabled] = useState(false);

  return (
    <Box width="300px" height="500px" borderColor="stroke.neutralMuted" borderWidth={1}>
      <PullToRefreshRoot
        onPtrReady={() => {}}
        onPtrRefresh={async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
        }}
        disabled={disabled}
      >
        <PullToRefreshIndicator />
        <PullToRefreshContent asChild>
          <HStack px="spacingX.globalGutter" py="x4" align="center" justify="space-between">
            <Text>Disabled</Text>
            <Switch checked={disabled} onCheckedChange={setDisabled} />
          </HStack>
        </PullToRefreshContent>
      </PullToRefreshRoot>
    </Box>
  );
};

export default PullToRefreshDisabled;

Prevent Pull

PullToRefresh.preventPull 속성을 사용하여 특정 영역에서 PTR 동작을 방지할 수 있습니다. user-select: auto;등을 통해 텍스트 선택이 가능한 영역에서 주로 사용됩니다.

import { AppBar, AppScreen } from "@seed-design/stackflow";
import { ActivityComponentType } from "@stackflow/react/future";
import { VStack, PullToRefresh, Box } from "@seed-design/react";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";

declare module "@stackflow/config" {
  interface Register {
    "react/pull-to-refresh/prevent-pull": unknown;
  }
}

const PullToRefreshPreventPull: ActivityComponentType<
  "react/pull-to-refresh/prevent-pull"
> = () => {
  // AppScreen is imported from @seed-design/stackflow instead of snippet for demo purpose.
  // AppScreen snippet is integrating PullToRefresh, so it's not necessary to use it here.
  return (
    <AppScreen.Root>
      <AppBar.Root divider>
        <AppBar.Main>
          <AppBar.Title>Pull To Refresh</AppBar.Title>
        </AppBar.Main>
      </AppBar.Root>
      <PullToRefreshRoot
        asChild
        onPtrReady={() => {}}
        onPtrRefresh={async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
        }}
      >
        <AppScreen.Layer>
          <PullToRefreshIndicator />
          <PullToRefreshContent asChild>
            <VStack px="spacingX.globalGutter" gap="x4">
              <Box p="x4" bg="bg.neutralWeak" color="fg.neutral" borderRadius="r2">
                이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis
                aute mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur
                exercitation velit anim.
              </Box>
              <Box
                p="x4"
                bg="bg.criticalWeak"
                color="fg.criticalContrast"
                borderRadius="r2"
                {...PullToRefresh.preventPull}
              >
                이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim
                excepteur laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint
                excepteur amet laboris.
              </Box>
              <Box p="x4" bg="bg.neutralWeak" color="fg.neutral" borderRadius="r2">
                이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis
                aute mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur
                exercitation velit anim.
              </Box>
              <Box
                p="x4"
                bg="bg.criticalWeak"
                color="fg.criticalContrast"
                borderRadius="r2"
                {...PullToRefresh.preventPull}
              >
                이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim
                excepteur laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint
                excepteur amet laboris.
              </Box>
            </VStack>
          </PullToRefreshContent>
        </AppScreen.Layer>
      </PullToRefreshRoot>
    </AppScreen.Root>
  );
};

export default PullToRefreshPreventPull;

Last updated on

On this page

Installation
Props
PullToRefreshRoot
PullToRefreshIndicator
PullToRefreshContent
Examples
PTR in Tabs
Disabled
Prevent Pull