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

name	type	current value	description
children	any		Elements inside this component
onChange	function		Event called when page changes
noFocus	boolean	false	Prevent auto focus at first render
threshold	number	0.5	Debounce time between states