Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Touchable

Touchable is a component which makes use of the touchable-hook which better emulates a native touch experience. It provides a configurable active press delay to prevent unwanted active press states when scrolling, and it provides hover states for mouse devices.

It's heavily inspired by the touchable component found in react-native and react-native-web.

Basic usage

import { Touchable } from "sancho";

<Touchable
  delay={0}
  pressExpandPx={10}
  onPress={() => console.log("hello!")}
  css={{
    "&.Touchable--hover": {
      border: "1px solid"
    },
    "&.Touchable--active": {
      background: "#08e"
    }
  }}
>
  Can touch this!
</Touchable>

API

Touchable
onPressOnPressFunction
disabledboolean
delaynumber
By default, a touchable element will only highlight after a short delay to prevent unintended highlights when scrolling. This will only effect touch devices.
pressExpandPxnumber
By default, a touchable element will have an expanded press area of 20px on touch devices. This will only effect touch devices.
terminateOnScrollboolean
Whether active presses should be terminated when scrolling occurs. Typically this should be true.
componentReactType<any>