Touch

React Bootstrap 5 Touch

This component allows you to improve the user experience on mobile touch screens by calling methods on the following custom events: pinch, swipe, tap, press, pan and rotate.

Note: Read the API tab to find all available options and advanced customization

Note: This method is intended only for users of mobile touch screens, so it won't work for the mouse or keyboard events.


Press

Press calls the chosen method when the touch event on the element lasts longer than 250 miliseconds.

Hold the button to remove the mask from the image

Press duration

Touch event press with custom duration.

Hold the button to remove the mask from the image with 5 seconds


Tap

The callback on tap event is called with an object containing origin field - the x and y cooridinates of the user's touch.

Tap button to change a color

Double Tap

Set default taps to touch event.

Change background color with 2 taps


Pan

The pan event is useful for dragging elements - every time the user moves a finger on the element to which the directive is attached to, the given method is being called with an argument consisting of two keys: x and y (the values corresponds to the horizontal and vertical translation).


Pan Left

Pan with only left direction


Pan Right

Pan with only right direction


Pan Up/Down

Pan with only up/down direction


Pinch

The pinch event calls the given method with an object containing two keys - ratio and origin. The first one it the ratio of the distance between user's fingers on touchend to the same distance on touchstart - it's particularly useful for scaling images. The second one, similarly as in doubleTap event, is a pair of coordinates indicating the middle point between the user's fingers.


Swipe Left/Right

The swipe event comes with several modifiers (left, right, up, down) - each of them will ensure that event will fire only on swipe in that particular direction. If the directive is used without any modifier, the callback method will be called each time the swiping occurs, and the string indicating the direction will be passed as an argument.

This example shows example with left and right

Swipe Left-Right to change a color


Swipe Up/Down

This example shows example with up and down

Swipe Up-Down to change a color


Rotate

This example shows example with rotate

Touch - API


Import


        import { MDBTouch } from 'mdb-react-ui-kit';
      

Properties

MDBTouch

Name Type Default Description
tag String 'div' Defines tag of the MDBTouch element
className String '' Add custom class to MDBTouch
touchRef Reference '' A reference for the MDBTouch element
type 'swipe' | 'tap' | 'press' | 'pan' | 'pinch' | 'rotate' '' A type of touch event

Tap

Name Type Default Description
interval number 500 Set interval to tap
time number 250 Set delays time to tap event
taps number 1 Set default value of number for taps
pointers number 1 Set default value of number for pointers
onTap Function A callback for tap event

Press

Name Type Default Description
time number 250 Set time delays to take tap
pointers number 1 Set default value of number for pointers
onPress Function A callback for press event

Swipe

Name Type Default Description
threshold number 10 Set distance bettwen when event fires
direction string all Set direction to swipe. Available options: all, right, left, top, up.
allDirections boolean true Enables swiping in all directions
onSwipe Function A callback for swipe event (in all directions)
onSwipeLeft Function A callback for swipe event (in the left direction)
onSwipeRight Function A callback for swipe event (in the right direction)
onSwipeUp Function A callback for swipe event (in the up direction)
onSwipeDown Function A callback for swipe event (in the down direction)

Rotate

Name Type Default Description
angle number 0 Set started angle to rotate.
pointers number 2 Set default value of number for pointers
onRotate Function A callback for rotate event

Pan

Name Type Default Description
threshold number 20 Set distance bettwen when event fires
direction string all Set direction to pan. Available options: all, right, left, top, up.
pointers number 1 Set default value of number for pointers
allDirections boolean true Enables pan event in all directions
onPan Function A callback for pan event (in all directions)
onPanLeft Function A callback for pan event (in the left direction)
onPanRight Function A callback for pan event (in the right direction)
onPanUp Function A callback for pan event (in the up direction)
onPanDown Function A callback for pan event (in the down direction)

Pinch

Name Type Default Description
pointers number 2 Option for tap event, set duration to how long it takes to take a tap
threshold number 10 Set distance bettwen when event fires
onPinch Function A callback for pinch event