@fiad/react-scroll-context v1.1.0

react-scroll-context

A React context wrapper to handle scroll scenarios

Installation

You can easily install the library via npm by running the following command:

npm install --save @fiad/react-scroll-context

Usage

As first step, you need to import the context provider from library and implement it in your application. In order to handle scroll calculations, the context needs two dom references: a scroll container and a scrollable content. By default they are, respectively, window and document.body. Here below an example of a basic implementation:

import React, { Component } from 'react'
import ScrollContext from '@fiad/react-scroll-context'
import MyScrollClientComponent from 'path/to/my/components/MyScrollClientComponent'

class App extends Component {
  render() {
    return (
      <ScrollContext>
        <MyScrollClientComponent />
      </ScrollContext>
    )
  }
}

export default App

If your application has a custom structure so it needs those references to be customized, you can pass them directly as properties of ScrollContext, as shown below:

import React, { Component } from 'react'
import ScrollContext from '@fiad/react-scroll-context'
import MyScrollClientComponent from 'path/to/my/components/MyScrollClientComponent'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.scrollContainerRef = React.createRef()
    this.scrollContentRef = React.createRef()
  }

  componentDidMount () {
    this.setState({
      scrollContainer: this.scrollContainerRef.current,
      scrollContent: this.scrollContentRef.current
    })
  }

  render () {
    const { scrollContainer, scrollContent } = this.state

    return (
      <div ref={this.scrollContainerRef} style={{ width: '100%', height: '100%', overflow: 'auto' }}>
        <div ref={this.scrollContentRef} style={{ display: 'inline-block' }}>
          <ScrollContext container={scrollContainer} content={scrollContent}>
            <ScrollClientComponent />
          </ScrollContext>
        </div>
      </div>
    )
  }
}

export default App

A global scroll context will be now available and the following data will be accessible from its child components:

At this point, you only have to make context's data accessible within your component. For this goal, you can use both React's hooks and Context API depending on how your component has been implemented. Lets see both examples:

useContext (hook)

import React, { useContext } from 'react'
import { Context as ScrollContext } from '@fiad/react-scroll-context'

const MyScrollClientComponent = () => {
  const { x, xPercent, y, yPercent } = useContext(ScrollContext)
  {/* make your own stuff here with context's data */}
  return <h1>My scroll client component</h1>
}

export default MyScrollClientComponent

contextType (Context API)

import React, { Component } from 'react'
import { Context as ScrollContext } from '@fiad/react-scroll-context'

class MyScrollClientComponent extends Component {
  static contextType = ScrollContext

  render() {
    const { x, xPercent, y, yPercent } = this.context
    {/* make your own stuff here with context's data */}
    return <h1>My scroll client component</h1>
  }
}

export default MyScrollClientComponent