fullpage-scroll-component(Eng)

This component form React(it supports SSR now)

How to use(Example)

fullpage-scroll-component provides a StepScroll component and one useStepScroll hook.

• StepScroll component is used to set up scroll zones. It is assisted by Page.

• StepScroll component takes in three props.

  • defaultPage: Set the default page to be placed on the screen.(Set to a number greater than 0 and equal to or less than the total number of pages, default is 0)

  • delay: Adjust the delay after which the screen flips (default is 300, units ms)

  • isScrollabled: Turn on/off scrolling to move on to the next page.(default is true)

  • isPreventDefault: Setting to prevent scrolling. When isScrollable is false, isPreventDefault is also automatically false(default is true)

function App() {
  return (
    <StepScroll>
      <Page>
        <FirstCustomComponent />
      </Page>
      <Page>
        <SecondCustomComponent />
      </Page>
      <Page>
        <ThirdCustomComponent />
      </Page>
    </StepScroll>
  );
}

• Underneath the StepScroll component, scrolling is accomplished through the useStepScroll hook.

• useStepScroll: The page number currently visible on the screen.

  • currentPage: 현재 화면에 보이는 페이지 번호.

  • resetCurrent: Resets to the default page number that was entered when the hook was loaded.

  • hasNextPage: Indicates whether the next page exists.

  • hasPrevPage: Indicates whether the previous page exists.

  • nextPage: The function to go to the next page.

  • prevPage: The function to go to the previous page.

  • movePage: A function that, when executed with the page you want to move to as an argument, moves to that page.

function FirstCustomComponent() {
  const {
    currentPage,
    resetCurrent,
    hasNextPage,
    hasPrevPage,
    nextPage,
    prevPage,
    movePage,
  } = useStepScroll();
  return <div></div>;
}

Example usage

Use inside a component

function FirstCustomComponent() {
  const {
    currentPage,
    resetCurrent,
    hasNextPage,
    hasPrevPage,
    nextPage,
    prevPage,
    movePage,
  } = useStepScroll();
  return (
    <div>
      {hasPrevPage && <button onClick={prevPage}>Prev</button>}
      {hasNextPage && <button onClick={nextPage}>Next</button>}
    </div>
  );
}

• In the StepScroll component subcomponent, you can useStepScroll to create a button that moves the page.

Using refs

function App() {
  const ref = useRef<HandleScroll>(null);

  return (
    <>
      <StepScroll ref={ref}>
        <StepScroll.Page>
          <FirstCustomComponent />
        </StepScroll.Page>
        <StepScroll.Page>
          <SecondCustomComponent />
        </StepScroll.Page>
        <StepScroll.Page>
          <ThirdCustomComponent />
        </StepScroll.Page>
      </StepScroll>
      <button
        onClick={() => {
          ref.current.nextPage();
        }}
      >
        Next Page
      </button>
      <button
        onClick={() => {
          ref.current.prevPage();
        }}
      >
        Prev Page
      </button>
      <button
        onClick={() => {
          ref.current.movePage(2);
        }}
      >
        Move to 2page
      </button>
      <button
        onClick={() => {
          ref.current.resetCurrentPage();
        }}
      >
        To the first screen
      </button>
    </>
  );
}

• You can use refs to manipulate some of the behavior of the StepScroll component.

  • currentPage: Represents the current page.

  • nextPage: The function to go to the next page.

  • prevPage: Function to go to the previous page.

  • movePage: A function to move to a specific page.

  • resetCurrentPage: Function to return to the first (default or 0th) screen.

fullpage-scroll-component(한글)

이 컴포넌트는 React 를 위한 컴포넌트 입니다. (SSR 지원합니다.)

사용방법(Example)

fullpage-scroll-component는 StepScroll 컴포넌트와 useStepScroll 훅 하나를 제공합니다.

• StepScroll 컴포넌트는 스크롤 구역을 설정할 때 사용합니다. Page의 도움을 받습니다.

• StepScroll 컴포넌트는 세가지 프랍스를 넘겨받습니다.

  • defaultPage: 화면에 위치시킬 디폴트 페이지를 설정합니다.(0보다 크고 전체 페이지 갯수와 같거나 작은 수로 설정, default is 0)

  • delay: 화면이 넘어가는 딜레이를 조정합니다 (default is 300, 단위 ms)

  • isScrollabled: 스크롤로 이전/다음 페이지로 넘어가는 기능을 on/off 합니다.(default is true)

  • isPreventDefault: 스크롤을 막는 설정값입니다. isScrollabled가 false일때 isPreventDefault 또한 자동으로 false 입니다.(default is true)

function App() {
  return (
    <StepScroll>
      <Page>
        <FirstCustomComponent />
      </Page>
      <Page>
        <SecondCustomComponent />
      </Page>
      <Page>
        <ThirdCustomComponent />
      </Page>
    </StepScroll>
  );
}

• StepScroll컴포넌트 하위에선 useStepScroll 훅을 통해 스크롤 조작이 가능합니다.

• useStepScroll이 반환하는 값은 아래와 같습니다.

  • currentPage: 현재 화면에 보이는 페이지 번호.

  • resetCurrent: 훅을 불러올때 입력했던 디폴트 페이지 번호로 초기화 합니다.

  • hasNextPage: 다음 페이지의 존재 여부를 나타냅니다.

  • hasPrevPage: 이전 페이지의 존재 여부를 나타냅니다.

  • nextPage: 다음 페이지로 이동하는 함수입니다.

  • prevPage: 이전 페이지로 이동하는 함수입니다.

  • movePage: 넘어가고자 하는 페이지를 인자로 넣고 실행하면 해당 페이지로 이동합니다.

function FirstCustomComponent() {
  const {
    currentPage,
    resetCurrent,
    hasNextPage,
    hasPrevPage,
    nextPage,
    prevPage,
    movePage,
  } = useStepScroll();
  return <div></div>;
}

사용예시

컴포넌트 내부에서 사용

function FirstCustomComponent() {
  const {
    currentPage,
    resetCurrent,
    hasNextPage,
    hasPrevPage,
    nextPage,
    prevPage,
    movePage,
  } = useStepScroll();
  return (
    <div>
      {hasPrevPage && <button onClick={prevPage}>Prev</button>} // 이전 페이지ㅣ
      {hasNextPage && <button onClick={nextPage}>Next</button>}
    </div>
  );
}

• StepScroll 컴포넌트 하위 컴포넌트에서 useStepScroll을 통해 페이지를 이동하는 버튼을 만들 수 있습니다.

ref 를 활용한 사용

function App() {
  const ref = useRef<HandleScroll>(null);

  return (
    <>
      <StepScroll ref={ref}>
        <StepScroll.Page>
          <FirstCustomComponent />
        </StepScroll.Page>
        <StepScroll.Page>
          <SecondCustomComponent />
        </StepScroll.Page>
        <StepScroll.Page>
          <ThirdCustomComponent />
        </StepScroll.Page>
      </StepScroll>
      <button
        onClick={() => {
          ref.current.nextPage();
        }}
      >
        다음페이지
      </button>
      <button
        onClick={() => {
          ref.current.prevPage();
        }}
      >
        이전페이지
      </button>
      <button
        onClick={() => {
          ref.current.movePage(2);
        }}
      >
        2페이지로 이동
      </button>
      <button
        onClick={() => {
          ref.current.resetCurrentPage();
        }}
      >
        처음화면으로
      </button>
    </>
  );
}

• ref를 사용해 StepScroll 컴포넌트의 일부 동작을 조작할 수 있습니다.

  • currentPage: 현재 페이지를 나타냅니다.

  • nextPage: 다음페이지로 이동하는 함수입니다.

  • prevPage: 이전페이지로 이동하는 함수입니다.

  • movePage: 특정페이지로 이동하는 함수입니다.

  • resetCurrentPage: 처음(디폴트 or 0번째)화면으로 돌아가는 함수입니다.