Have ideas to improve npm?Join in the discussion! »


0.9.7 • Public • Published



Alert that supports swiping to accept/cancel on touch-supported devices and speech recognition. Created for learning purposes

NOTE: There is currently no implemented way of styling the component.

NOTE: Component only recognized "ok", "yes" and "accept" for a true response and "no", "cancel" or "decline" for a false response. Changing the language may therefor cause problems with speech recognition


React v16.8.0 or higher - Created using useState and useEffect hooks.


  • Import dependency
  • Add boolean state to control when to show the alert.
  • Create your listener function and use in onResult prop. To avoid animations getting cut, include the setTimeout with time parameter at the end of the listening function.
import React, { useState } from 'react';
import AlertBox from 'react-swipeable-alert';

const SomeComponenet = () => {
  const [alert, setAlert] = useState(false);

  const alertListener = (r, time) => {
    if (r) {
      // Do something if accepted
    } else {
      // Do something if declined

    // Remove alert after animation
    setTimeout(() => {
    }, time);

  return (
    <div id='someComponent'>
        {alert && <AlertBox onResult={alertListener} />}

export default SomeComponenet;

Additional PROPS

  • okBtn: (String) the text displayed on the yes-button. Defaults to “Ok”.
  • noBtn: (String) the text displayed on the no-button. Defaults to “Cancel”
  • title: (String) the text displayed as the header on the alert. Defaults to “Alert!”
  • msg: (String) the message to be shown in the alertbox. Defaults to "Template message!"
  • onResult: (function) Required! Input a function that handles the result (r) from the alert.
  • animationTime: (number) Tells the component how quickly any css transitions should be in seconds and is returned as milliseconds to the handleAlertResult (time). Defaults to 0.3
  • swipeDistanceFraction: (number) Defines the fraction of screenspace required for a response to be recorded. Defaults to 3 which means 1/3 of the screen space. 2 would mean half the screen (1/2).
  • useSound: (bool) whether to play a sound with each response.
  • okSound: (file) Required if useSound is true. Input a sound-file (for example .wav or .mp3) which gets played with the accept button
  • noSound: (file) Required if useSound is true. Same as okSound, but for a declined result
  • useVoice: (bool) activates or disables voice activation.
  • voiceLanguage: (string) Default 'en-GB'


npm i react-swipeable-alert

DownloadsWeekly Downloads






Unpacked Size

520 kB

Total Files


Last publish


  • avatar