Stepped Scroll Component Library.
npm install fullpage-scroll-componentThis component form React(it supports SSR now)
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)
``typescript`
function App() {
return (
);
}
- 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.
`typescript`
function FirstCustomComponent() {
const {
currentPage,
resetCurrent,
hasNextPage,
hasPrevPage,
nextPage,
prevPage,
movePage,
} = useStepScroll();
return ;
}
`typescript`
function FirstCustomComponent() {
const {
currentPage,
resetCurrent,
hasNextPage,
hasPrevPage,
nextPage,
prevPage,
movePage,
} = useStepScroll();
return (
{hasPrevPage && }
{hasNextPage && }
);
}
- In the StepScroll component subcomponent, you can useStepScroll to create a button that moves the page.
`typescript
function App() {
const ref = useRef
return (
<>
ref.current.nextPage();
}}
>
Next Page
ref.current.prevPage();
}}
>
Prev Page
ref.current.movePage(2);
}}
>
Move to 2page
ref.current.resetCurrentPage();
}}
>
To the first screen
);
}
`
- 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.
이 컴포넌트는 React 를 위한 컴포넌트 입니다. (SSR 지원합니다.)
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)
`typescript`
function App() {
return (
);
}
- StepScroll컴포넌트 하위에선 useStepScroll 훅을 통해 스크롤 조작이 가능합니다.
- useStepScroll이 반환하는 값은 아래와 같습니다.
- currentPage: 현재 화면에 보이는 페이지 번호.
- resetCurrent: 훅을 불러올때 입력했던 디폴트 페이지 번호로 초기화 합니다.
- hasNextPage: 다음 페이지의 존재 여부를 나타냅니다.
- hasPrevPage: 이전 페이지의 존재 여부를 나타냅니다.
- nextPage: 다음 페이지로 이동하는 함수입니다.
- prevPage: 이전 페이지로 이동하는 함수입니다.
- movePage: 넘어가고자 하는 페이지를 인자로 넣고 실행하면 해당 페이지로 이동합니다.
`typescript`
function FirstCustomComponent() {
const {
currentPage,
resetCurrent,
hasNextPage,
hasPrevPage,
nextPage,
prevPage,
movePage,
} = useStepScroll();
return ;
}
`typescript`
function FirstCustomComponent() {
const {
currentPage,
resetCurrent,
hasNextPage,
hasPrevPage,
nextPage,
prevPage,
movePage,
} = useStepScroll();
return (
{hasPrevPage && } // 이전 페이지ㅣ
{hasNextPage && }
);
}
- StepScroll 컴포넌트 하위 컴포넌트에서 useStepScroll을 통해 페이지를 이동하는 버튼을 만들 수 있습니다.
`typescript
function App() {
const ref = useRef
return (
<>
ref.current.nextPage();
}}
>
다음페이지
ref.current.prevPage();
}}
>
이전페이지
ref.current.movePage(2);
}}
>
2페이지로 이동
ref.current.resetCurrentPage();
}}
>
처음화면으로
);
}
`
- ref를 사용해 StepScroll 컴포넌트의 일부 동작을 조작할 수 있습니다.
- currentPage: 현재 페이지를 나타냅니다.
- nextPage: 다음페이지로 이동하는 함수입니다.
- prevPage: 이전페이지로 이동하는 함수입니다.
- movePage: 특정페이지로 이동하는 함수입니다.
- resetCurrentPage`: 처음(디폴트 or 0번째)화면으로 돌아가는 함수입니다.