fkhadra / fkhadra/react-on-screen
Allowing to set the initial state of the component
- Dominant language
- JavaScript
- Stars
- 402
- Forks
- 50
- PR merge metrics
- No merged PRs in 30d
Description
Hello, I'm using this module to track an element at the top of the page (and so visible by default).
In the first load of the page this component always returns `false` and then the correct `true`, while if I reload the page when the component is not visible by default (i.e. if I reload while i'm in the middle of the page) I get only `false` which is correct.
You can see a replica [here](https://43kw5np4k7.codesandbox.io/), and [here's](https://codesandbox.io/s/43kw5np4k7?expanddevtools=1) the code.
**Edit:** Okay, I checked the code and I see that the first `false` makes sense, since it's the default state, and I don't get a second value when I refresh while not seeing the element because the state remain `false`. This is quite a tricky thing, because I have an animation that triggers when ` isVisible === false`, and so happens to trigger in the first load because of the default state. I tried to ignore that state but if a refresh happens in the middle of the page then the animation won't trigger.
I think allowing to set the initial state of the component could be an interesting solution, couldn't it?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the behavior in the linked CodeSandbox examples and read the component's documented API and entry point. Define how callers provide an initial visibility value without changing the normal viewport updates. Done means the initial state can suppress the unwanted first animation while preserving correct behavior after reloads and when the element becomes visible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100