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 | "" |