fpoint

APIs & Examples

Cube Example

Use mouse or finger (touch screen) to scrub the cube to rotate. colors change while hovering with mouse but not touch

Slider Example

Use mouse or finger to scrub the slider. Change the settings below to toggle different behaviors.

Enable Mouse

Enable Touch

Enable Hover

IDLE

Usage

fscrub()


import { fscrub } from 'fpoint'

fscrub(document.querySelector('.slider'), {
  onStart() {},
  onMove() {},
  onEnd() {},
})

Use with react


import {Scrub} from 'fpoint/react'

function handleScrubMove(e) {
  const pageX = e.touches ? e.touches[0].pageX : e.pageX
  const pageY = e.touches ? e.touches[0].pageY : e.pageY
  
  // ...
}

return (
  <Scrub
    onScrubMove={handleScrubMove}
  >
    {children}
  </Scrub>
)