Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Feature: add useScrollLock hook #479

Merged
merged 6 commits into from
Feb 21, 2024

Conversation

BlankParticle
Copy link
Contributor

Adds a new hook called useScrollLock that allows you to automatically/programmatically lock the scroll of target element.

Todo

  • useScrollLock hook
  • Docs
  • Example
  • Tests

Copy link

changeset-bot bot commented Feb 9, 2024

🦋 Changeset detected

Latest commit: fb0b178

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
usehooks-ts Minor
www Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@juliencrn
Copy link
Owner

Duplicate of useLockedBody? However, it brings some interesting stuffs

@BlankParticle
Copy link
Contributor Author

BlankParticle commented Feb 9, 2024

The most useful feature is auto lock/unlock, its based on https://usehooks.com/uselockbodyscroll but has a larger feature set.

I think this can also replace useLockedBody if you want me to implement scrollbar width reflow hack

@juliencrn juliencrn added the feature request request a feature or hook to be added label Feb 20, 2024
@BlankParticle
Copy link
Contributor Author

@juliencrn, Hey I was busy with exams and didn't check much, I see that the hooks I made PRs for are still sitting unreviewed. Can you please review and accept the PRs in mean while. I would be free from tommorow, when I could work more on the project.

Thanks

- remove the internal state
- add JSDoc param details
- add width reflow support
- simplify a bit the useEffect
- make the demo working
- remove eslint-disable comment
@juliencrn
Copy link
Owner

Hi @BlankParticle,
I made some adjustments to the hook:

  • remove the internal state
  • add JSDoc param details
  • add width reflow support
  • simplify a bit the useEffect
  • make the demo working
  • remove eslint-disable comment

What do you think about it?

@BlankParticle
Copy link
Contributor Author

Width reflow should be an option that is enabled by default but can be disabled if the user wants

@juliencrn
Copy link
Owner

We also should remove this file apps/www/src/hooks/use-lock-body.ts used in apps/www/src/components/mobile-nav.tsx and use the new one from usehooks-ts instead

@BlankParticle
Copy link
Contributor Author

We also should remove this file apps/www/src/hooks/use-lock-body.ts used in apps/www/src/components/mobile-nav.tsx and use the new one from usehooks-ts instead

I will do that in a new PR

@BlankParticle
Copy link
Contributor Author

Oh, you did the work on site already. I think we are good to merge 🚀

@juliencrn juliencrn merged commit 649ef39 into juliencrn:master Feb 21, 2024
2 checks passed
@BlankParticle BlankParticle deleted the feat/use-scroll-lock branch February 21, 2024 19:05
@BlankParticle
Copy link
Contributor Author

On a side note, there are new pull requests coming everyday, Do you want me to help in reviewing them?
I already did one or two review

@juliencrn
Copy link
Owner

Yes totally, it's more than welcome 🙌 Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request request a feature or hook to be added
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants