@torc/react-fullscreen-scroller NPM

A simple fullscreen scroller component built with React. Made by Opentorc

Installation

npm:

npm install @torc/react-fullscreen-scroller

yarn:

yarn add @torc/react-fullscreen-scroller

Getting started with React FullScreen Scroller

Here is an example of a basic using FullScreenScroller component:

import React from "react";
import FullScreenScroller from "@torc/react-fullscreen-scroller";
import "@torc/react-fullscreen-scroller/dist/index.css";

function App() {
  <FullScreenScroller desktopBreakPoint={768} controls>
    <div>
      <p>First screen</p>
    </div>

    <div>
      <p>Second screen</p>
    </div>
  </FullScreenScroller>;
}

Basic features

Action	Description
Press arrow down / page down / wheel down	Scroll to the next screen
Press arrow top / page up / wheel up	Scroll to the previous screen
Press 1, 2...9	Jump to a specific screen

Props

Name	Type	Description	Default value
controls	boolean	Whether slide navigation will be shown	true
hideControlsOnFirstSlide	boolean	Whether slide navigation will be hidden on the first slide	true
desktopBreakPoint	number	The width of the device screen on which the module will work	1024
containerStyle	object	The styles object for the parent container of the scroller	{}
slideContainerStyle	object	The styles object for the container of each slide in scroller	{}
controlsStyle.container	object	The styles object for the parent container of the controls	{}
controlsStyle.slideNumber	object	The styles object for the current slide number	{}
controlsStyle.activeControl	object	The styles object for the active control circle	{}
controlsStyle.inactiveControl	object	The styles object for the inactive control circle	{}
containerClassName	string	className for the parent container of the scroller	""
slideContainerClassName	string	className for the container of each slide in scroller	""
controlsContainerClassName	string	className for the parent container of the controls	""
slideNumberClassName	string	className for the current slide number	""
activeControlClassName	string	className for the active control circle	""
inactiveControlClassName	string	className for the inactive control circle	""