react-full-page-scroll

Component for creating one page vertical scroll.

Usage no npm install needed!

<script type="module">
  import reactFullPageScroll from 'https://cdn.skypack.dev/react-full-page-scroll';
</script>

README

React One Page Scroll

Component for creating one page vertical scroll.

Install

$ npm install react-full-page-scroll

Run

$ npm install

Usage

import React from "react";
import ScrollableContainer from "react-full-page-scroll";


function PageComponent = ({children}) => {
  return (<div>{children}</div>)
}


function App() {
  return (
    <ScrollableContainer animationTime={2000}>
      <PageComponent>Page One</PageComponent>
      <PageComponent>Page Two</PageComponent>
      <PageComponent>Page Three</PageComponent>
    </ScrollableContainer>
  );
}

export default App;

Props / Options

  • animationTime - Time it takes to do scrolling animation in miliseconds (defaults is 1000 miliseconds)

note: we do a scroll locking to prevent user from scrolling when animation is working. the locking time was animationTime + 500 miliseconds