User Focus Tracking

In its simplest use case, Focus Tracker can just track the current user's focus. A single configuration can be created on the document.body to provide a consistent experience.

Typescript
React

import { registerFocusTrackerConfiguration } from '@michaeldrotar/focus-tracker-js/registerFocusTrackerConfiguration'
import { startUserFocusTracker } from '@michaeldrotar/focus-tracker-js/startUserFocusTracker'

registerFocusTrackerConfiguration(document.body, {
  color: 'blue',
  thickness: 2
})
startUserFocusTracker()

import { FocusTrackerRegistration } from '@michaeldrotar/react-focus-tracker/FocusTrackerRegistration'
import { UserFocusTracker } from '@michaeldrotar/react-focus-tracker/UserFocusTracker'

function App() {
  return (
    <FocusTrackerRegistration color="blue" thickness={2}>
      <body />
    </FocusTrackerRegistration>
    <UserFocusTracker />
  )
}

tip

Check out the Configuration page to see all options.