Touchable

Animated wrapper providing native-like tap feedback. You can use it instead of raw div + onClick.

Anchor to propsProps

Anchor to children children React.ReactNode: Content to render inside the touchable area
Anchor to onClick onClick React.MouseEventHandler<HTMLDivElement>: Click handler
Anchor to stopPropagation stopPropagation boolean: Prevent click event from bubbling to parent elements

Examples

tsx

import {Touchable} from '@shopify/shop-minis-react'

export default function MyComponent() {

const handleClick = () => {

console.log('Touchable clicked')

}

return (

<div>Continue</div>

</Touchable>

)

}

Examples

tsx

import {Touchable} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const handleClick = () => {
    console.log('Touchable clicked')
  }

  return (
    <Touchable onClick={handleClick}>
      <div>Continue</div>
    </Touchable>
  )
}

Was this page helpful?