https://github.com/hellohejinyu/react-blocks-scroll-sync

Synchronously scrolling multiple blocks.
https://github.com/hellohejinyu/react-blocks-scroll-sync

react scroll scrollsync sync

Last synced: about 1 year ago
JSON representation

Synchronously scrolling multiple blocks.

• Host: GitHub
• URL: https://github.com/hellohejinyu/react-blocks-scroll-sync
• Owner: hellohejinyu
• Created: 2018-02-12T02:45:20.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-05T08:41:11.000Z (about 6 years ago)
• Last Synced: 2024-02-22T21:46:00.596Z (about 2 years ago)
• Topics: react, scroll, scrollsync, sync
• Language: TypeScript
• Homepage:
• Size: 196 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-blocks-scroll-sync · [![npm](https://img.shields.io/npm/v/react-blocks-scroll-sync.svg)](https://www.npmjs.com/package/react-blocks-scroll-sync)

Synchronously scrolling multiple blocks.

## Install

``` shell

npm i --save react-blocks-scroll-sync

```

## Quick Overview

``` jsx

import React, { useCallback } from 'react'

import Container from 'react-blocks-scroll-sync'

const Block = Container.Block

const randomColor = () => {

  const r = Math.floor(Math.random() * 256)

  const g = Math.floor(Math.random() * 256)

  const b = Math.floor(Math.random() * 256)

  const color = `rgb(${r},${g},${b})`

  return color

}

const App = () => {

  const renderMultiBox = useCallback(() => {

    return new Array(100).fill(1).map((v, k) => {

      return (

        


          {k}

        

      )

    })

  }, [])


  return (

    


      

        {renderMultiBox()}

        {renderMultiBox()}

        {renderMultiBox()}

      

    

  )

}


export default App

```



  



## Tips

⚠️ The number of child elements of each `` component need to be same.