react-swipeable-alert

DESCRIPTION

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

REQUIREMENTS

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

USE EXAMPLE

• 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(() => {
      setAlert(false);
    }, time);
  }

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

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'