Semantic UI React 2.0.1src/behaviors/Visibility/Visibility.jsVisibilityVisibility provides a set of callbacks for when a content appears in the viewport.
Types
Default
An example of Visibility.
| Calculation | Value |
|---|---|
| direction | none |
| pixelsPassed | 0px |
| percentagePassed | 0% |
| fits | false |
| width | 0px |
| height | 0px |
| onScreen | false |
| offScreen | false |
| passing | false |
| topVisible | false |
| bottomVisible | false |
| topPassed | false |
| bottomPassed | false |
Settings
Fire on mount
Fires callbacks immediately after mount.
| Calculation | Value |
|---|---|
| direction | up |
| pixelsPassed | 0px |
| percentagePassed | 0% |
| fits | false |
| width | 950px |
| height | 76px |
| onScreen | false |
| offScreen | true |
| passing | false |
| topVisible | false |
| bottomVisible | false |
| topPassed | false |
| bottomPassed | false |
Offset
Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the page.
| Calculation | Value |
|---|---|
| topVisible | false |
| bottomVisible | false |
| topPassed | false |
| bottomPassed | false |
Callback frequency
You can change the callback frequency with `once` and `continuous` settings.
Event Log
0
Grouped callbacks
You can specify callbacks that occur after different percentages or pixels of an element are passed.
Event Log
0
Update on
You can specify updateOn='repaint', it will allow to update and fire callbacks on browser repaint (animation frames).
It's a tricky
Segment| Calculation | Value |
|---|---|
| topVisible | false |
| bottomVisible | false |
This is the bottom
Blazing deployments by 
Vercel.
Vercel.