Refract
  • Read Me
  • Introduction
    • Why Refract?
    • Core Concepts
    • Thinking In Refract
    • Alternatives
  • Usage
    • Getting Started
    • Installation
    • Connecting To React
    • Observing React, Preact and Inferno
    • Injecting Dependencies
    • Observing Redux
    • Observing Anything
    • Handling Effects
    • Pushing to Props
    • Rendering Components
    • Handling Errors
    • Testing
  • Recipes
    • Dependency Injection
    • Creating An API Dependency
    • Handling state
    • Replacing Redux Connect
  • Examples
    • Debounced fetch
    • Counter
    • Field validation
    • Redux fetch
    • Routing
    • Typeahead
    • Visit time
  • API
    • compose
    • withEffects
    • toProps, asProps
    • useRefract
    • refractEnhancer (Redux)
  • Glossary
  • Feedback
Powered by GitBook
On this page
  • Visit time
  • Aperture
  • Handler
  • Result
  1. Examples

Visit time

PreviousTypeaheadNextAPI

Last updated 6 years ago

Visit time

callbag

most

RxJS

xstream

This examples renders a stopwatch counting the time a user spends on a page while being online.

Aperture

Two sources observed:

  • The visibility status of the page (See )

  • The online status of the navigator (See )

Every time the page becomes visible and online, the stopwatch resumes. If the page becomes either offline or hidden, the stopwatch pauses.

Handler

The Refract handler handles pause, resume and tick effects to track the total time spent on the page and set it in state. It handles Date.now() impure calls.

Result

The end result is a stopwatch counting the number of milliseconds spent on the page when visible and online. To play with it you can:

  • switch between tabs, and you'll notice the counter hasn't moved while the example tab was hidden

  • toggle your navigator online status (can be done via devtools)

page visibility API
online and offline events
code
live
code
live
code
live
code
live