Nagging Mario's Princess
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-fully-scrolledpublic

    React Fully Scrolled

    NPM version

    A full-page scroll component for react with support for touch events.
    Inspired by react-fullpage

    • Simple
    • Performant
    • Touch support

    Live Demo

    Usage

    npm install react-fully-scrolled

    For mobile compatibility, make sure to disable touchmove events, like so:

    document.ontouchmove = function(ev) {
      ev.preventDefault();
    }

    Simple Example

    import React, { Component } from 'react'
    import { render } from 'react-dom'
    import { Scroller, Section } from 'react-fully-scrolled';
     
    class Pages extends React.Component {
      render() {
        return (
          <Scroller
            curPage={1}
            onBeforeScroll={(from, to) => {}}
            onAfterScroll={(page) => {}}
            isEnabled={true}
          >
            <Section>
              Page1
            </Section>
            <Section>
              Page2
            </Section>
            <Section>
              Page3
            </Section>
            <Section>
              Page4
            </Section>
          </Scroller>
        )
      }
    }
     
    render(<Pages />, document.getElementById('root'));

    API

    When the component is mounted, a function is added to the global scope:
    window.fpTurnTo(pageNum)

    Contributing

    See CONTRIBUTING.md

    install

    npm i react-fully-scrolled

    Downloadsweekly downloads

    5

    version

    1.0.4

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar