# ok-use-sync-scroll

A custom React hook to synchronize scrolling between two `div` elements. This package links the scroll positions of two separate `div` elements so that when one is scrolled, the other will follow, and vice versa. The hook is designed to be lightweight and optimized, using `requestAnimationFrame` to ensure smooth and efficient synchronization.

## Installation

To install the package, use npm or yarn:

```bash
npm install ok-use-sync-scroll
# or
yarn add ok-use-sync-scroll

Usage

Basic Usage

Import the hook and create references for the two div elements you want to sync:

import React, { useRef } from 'react';
import useSyncScroll from 'ok-use-sync-scroll';

const MyComponent = () => {
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);

  useSyncScroll(div1Ref, div2Ref);

  return (
    <div style={{ display: 'flex' }}>
      <div
        ref={div1Ref}
        style={{ overflow: 'auto', height: '200px', width: '200px', border: '1px solid gray' }}
      >
        {/* Content for the first div */}
        <p>Your content here...</p>
        {/* Add enough content to make the div scrollable */}
      </div>
      <div
        ref={div2Ref}
        style={{ overflow: 'auto', height: '200px', width: '200px', border: '1px solid gray' }}
      >
        {/* Content for the second div */}
        <p>Your content here...</p>
        {/* Add enough content to make the div scrollable */}
      </div>
    </div>
  );
};

export default MyComponent;

API

useSyncScroll

Parameters:

• div1Ref: React.RefObject<HTMLDivElement> - A React ref object for the first div.
• div2Ref: React.RefObject<HTMLDivElement> - A React ref object for the second div.

Usage:

Call useSyncScroll(div1Ref, div2Ref) within a functional component to synchronize scrolling between the two div elements.

Example:

import React, { useRef } from 'react';
import useSyncScroll from 'ok-use-sync-scroll';

const ExampleComponent = () => {
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);

  useSyncScroll(div1Ref, div2Ref);

  return (
    <div style={{ display: 'flex' }}>
      <div ref={div1Ref} style={{ overflow: 'auto', height: '200px', width: '200px', border: '1px solid gray' }}>
        {/* Scrollable content for the first div */}
      </div>
      <div ref={div2Ref} style={{ overflow: 'auto', height: '200px', width: '200px', border: '1px solid gray' }}>
        {/* Scrollable content for the second div */}
      </div>
    </div>
  );
};

export default ExampleComponent;

Notes

• Ensure that both div elements have overflow styles set (e.g., overflow: auto) to make them scrollable.
• The hook uses requestAnimationFrame to synchronize scrolling efficiently and reduce performance issues.
• The synchronization is bidirectional; scrolling one div will update the other.

Contributing

Contributions are welcome! If you have suggestions, bug reports, or improvements, please feel free to open an issue or submit a pull request.

How to Contribute

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -am 'Add new feature').
5. Push to the branch (git push origin feature-branch).
6. Create a new Pull Request.

License

This package is licensed under the MIT License. See the LICENSE file for more details.

Contact

For any questions or support, you can reach out to the maintainer at [[email protected]].

Feel free to modify the content to fit your project's specifics, including the actual email address or additional sections relevant to your project.