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>