Skip to content

opentorc/FullScreenScroller

Repository files navigation

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>;
}

Edit Button

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published