RFC: Roadmap for v2

[jpedroschmitz]

Hey, as someone who has been using react-scroll for a while, I really think we should have some changes in the lib. I'm creating this issue because I have some ideas of what we need to do on a possible v2.0 (I believe @fisshy also may have a lot of things he wants to change). So far, I have tracked the following things to address:

Breaking changes:

• Remove Helpers from v2 (since it was deprecated on v1.7)

Enhancements:

• Reduce bundle size (by removing export default from modules/index.js and doing other refactorings);
• Update lib dependencies and devDependencies (important to fix security issues);
• Fix some of the issues with methods and components of the lib;
• TypeScript conversion? We have types now, but I think we could support it out of the box;
• Improve accessibility (Tab and return key doesn't work #282);
• Add hooks (something like useScroll - more info on the comments and on Add useAnimateScroll hook  #435).

Documentation:

• Update Readme and all examples (to match the latest versions of React);
• Create a website as a demo? (maybe in the future?)

Development/GitHub changes:

• Create workflows for version 2.0 (to run tests, linting...) on PR's;
• Add Prettier, ESLint, EditorConfig;
• Remove .vscode settings (since we can add a .editorconfig, it's not necessary);
• Add issues and PR templates for GitHub;

I really want react-scroll to be updated. We have an average of 250 thousand downloads per week on npm and we can say for sure that this lib is outdated (on examples and implementation). So let's update it 🚀

@fisshy, we really need your opinion around here 💜

ps: this is an RFC I created, so this list may change.

[fisshy]

Great initiative! I couldn't agree more, it's getting outdated.

I think we should try to add hooks for scroll as well.

[jpedroschmitz]

Having hooks would be awesome. We could have something like useScroll.

const { scrollTo, scrollToTop } = useScroll(); 

And we could use it like this:

<button onClick={scrollToTop}>Go to top</button>

/* or */

<button onClick={() => scrollTo(150)}>Go to position</button>

What do you think @fisshy? 🚀

[fisshy]

Yes that would be really good @jpedroschmitz

And <Link /> <Element /> should be using these hooks as well when they register their element.

[jpedroschmitz]

That's awesome!

I think we can start working on this new version, at least updating some examples and adding linter...

We can create a next branch here on GitHub and start doing some refactoring/enhancements 🚀

[irhamputra]

any updates from this RFC?

[LauraBeatris]

Improve accessibility should also be a good point, refer to #282

Do we have other options besides adding an href that won't be used at all?

[fisshy]

@irhamputra Haven't found the time yet to start working on a 2.0, all contributions are welcomed.

[jpedroschmitz]

That's a great point @LauraBeatris

I've updated the RFC to add hooks and accessibility as new enhancements on the project, for version 2.0

[jpedroschmitz]

I think we can start working on the documentation and also adding CI workflows, adding Prettier, ESLint, and doing other development/GitHub changes. It will be a great starter point.

Who can help us? I am able to start by adding ESLint...

[LauraBeatris]

@jpedroschmitz Count on me 💪🏼

I'm able to add the CI workflows

[jpedroschmitz]

That's nice @LauraBeatris,

I will start by adding lint scripts and after that, we can include it on a CI workflow, to run on every PR.

[LauraBeatris]

Nice! @jpedroschmitz let me know when you send the PR so I can take a look before implementing the CI workflow