Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-fully-scrolledpublic

React Fully Scrolled

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

Simple
Performant
Touch support

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

Keywords

install

npm i react-fully-scrolled

weekly downloads

version

1.0.4

license

MIT

homepage

giladaya.github.io

repository

github

last publish

9 months ago

collaborators

Test with RunKit