sweet-scroll as react component

[Futos]

Hello @tsuyoshiwada,

thanks for your awesome project. It makes a lot of my work much easier. 💪

I just wonder me if there is a react component or wrapper for sweet-scroll. Because I would like to use it in an react project. would be aweome if there is a way to get it running ;)

Cheers!
Tobias

[bubblybunii]

I m using react & where I use document.addEventListener, it says document is not defined, anyone knows how to define document in typescript?

 document.addEventListener('DOMContentLoaded', () => {
      const sweetScroll = new SweetScroll({ /* some options */ });
    }, false);

[wadackel]

Hi @Futos, Thank you for issues. And I'm sorry I got very late... 😢

When I use it in React's world, I do not publish a rapper because I do not feel the necessity.
In many cases, I think that we can respond by responding in the following case 🐶

Target the entire page

document.addEventListener('DOMContentLoaded', () => {
  SweetScroll.create();
}, false);

This has nothing to do with React's world 😃

Target the container element

When creating a scrollable area elements, it can be realized with the following code.

import * as React from 'react';
import SweetScroll from 'sweet-scroll';

// Minimum example
class ScrollableContainer extends React.Component {
  container = React.createRef();
  scroller = null;

  componentDidMount() {
    this.scroller = SweetScroll.create(
      {
        trigger: "a[href^='#']"
      },
      this.container.current
    );
  }

  componentWillUnmount() {
    this.scroller.destroy();
  }

  render() {
    const { children } = this.props;

    return (
      <div
        ref={this.container}
        style={{
          overflowX: "auto",
          overflowY: "auto",
          width: 300,
          height: 300
        }}
      >
        {children}
      </div>
    );
  }
}

// Usecase
class App extends React.Component {
  render() {
    return (
      <div>
        <ScrollableContainer>
          <a href="#section">Go to Section</a>
          {/* Long content ... */}
          <div id="section">...</div>
        </ScrollableContainer>
      </div>
    );
  }
}