react-z-scroll

Made with create-react-library

react-z-scroll is a react scroll library built on top of skrollr.

DEM0

react-z-scroll demo

Install

npm install --legacy-peer-deps react-z-scroll

Usage

Add ScrollProvider into root app

import React, { Component } from 'react'

import { ScrollProvider } from 'react-z-scroll'

const myApp = () => {
     return (
      <ScrollProvider
        init={{
          smoothScrollingDuration: 500,
          smoothScrolling: true,
          forceHeight: false
        }}
      >
      ...
      </ScrollProvider>
    )
}

Setting Scene data (Required)

Use data scrolling via props data (props type is object)

Skrollr Data attr document

const Component = () => {
  return (
    <Scene
      data={{
        'data-center-center': 'opacity: 1;',
        'data-bottom-top': 'opacity: 0;'
      }}
    >
      Some content
    </Scene>
  )
}

License

MIT © Jonath-z