fkhadra / fkhadra/react-on-screen

Allowing to set the initial state of the component

Open
#28 0 comments 3 reactions 0 assignees View on GitHub
Feature Request 🚀
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.