React Mega Scroll

This is a react component to provide full page scrolling.

Demo

Install

npm i react-mega-scroll

Usage

import MegaScroll from 'react-mega-scroll';

function App() {
  return (
    <MegaScroll>
      // add pages to render here
    </MegaScroll>
  )
}

export default App

Example

import React, { useState } from "react";
import MegaScroll from "react-mega-scroll";

const styles: React.CSSProperties = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "60px",
  textAlign: "center",
  color: "white",
};

function App() {
  const [active, setActive] = useState(0);

  return (
    <MegaScroll onChange={setActive}>
      <div style={{ ...styles, background: "#111" }}>react-mega-scroll</div>
      <div style={{ ...styles, background: "#222" }}>Smooth Scrolling</div>
      <div style={{ ...styles, background: "#333" }}>Keyboard Support</div>
      <div style={{ ...styles, background: "#222" }}>State Listeners</div>
      <div style={{ ...styles, background: "#111" }}>Free Forever</div>
    </MegaScroll>
  );
}

export default App;

Props