okonet / react-scroll-sync

Synced scroll position across multiple scrollable elements
http://react-sync-scroll.netlify.com/
MIT License
426 stars 59 forks source link

Usage in Readme.md #51

Open pa-do opened 3 years ago

pa-do commented 3 years ago

I found an error while executing an usage of a README.md. And I found what the problem is. It would be helpful to reflect this in the document.

import React, {Component} from 'react';
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';

export default class MyComponent extends Component {
    render() {
    return (
        <ScrollSync>
        <div style={{ display: 'flex', position: 'relative', height: 300 }}>
          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 500 }}>
                <h1>Left Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>

          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 1000 }}>
                <h1>Middle Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>

          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 2000 }}>
                <h1>Right Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>
        </div>
      </ScrollSync>
    )}
}

Return was missing, and it works normally when added return ( to the line 6.

okonet commented 3 years ago

Please send me a PR

pa-do commented 3 years ago

This is my First PR for open source! I did it just few minutes before, so I close this issue!

Closes #52

okonet commented 3 years ago

Thanks for working on it. Instead of closing it here please refer to it in the PR and it will be closed when it gets merged.

Closes #xxx like this but with the proper issue number please.

pa-do commented 3 years ago

I got it. Thank you.