Hold To Confirm Interaction In JavaScript – sweetconfirm.js

Preview:

Description:

An awesome confirmation interaction concept that enables the user to confirm an action by clicking and holding on a confirm button.

See It In Action:

How to use it:

1. Install the sweetconfirm.js package.

# NPM
$ npm install sweetconfirm.js --save

2. Import the sweetconfirm.js.

// as an ES module
import { SweetConfirm } from "sweetconfirm.js";

<!-- OR -->
<script src="./sweetconfirm.min.js"></script>

3. Create a confirmation button on the page.

<button id="button">💬 Push the button!</button>

4. Enable the SweetConfirm on the button and perform an action after confirmation.

var button = document.getElementById("button");

function SendMessage(element, message) {
  document.getElementById(element).innerHTML = message;
  console.log("This is fake data!", "Green button is disabled now.");
}

new SweetConfirm(button, () => {
  SendMessage(
    "message",
    "OK! Fake data was sent to console.<br/>Refresh page for try again!"
  );
});

5. Customize the confirmation button.

var button = document.getElementById("button");

function SendMessage(element, message) {
  document.getElementById(element).innerHTML = message;
  console.log("This is fake data!", "Green button is disabled now.");
}

new SweetConfirm(button, () => {
  SendMessage(
    "message",
    "OK! Fake data was sent to console.<br/>Refresh page for try again!"
  );
},{
  background: "#0f4c81",
  backgroundSize: "215% 100%",
  backgroundPositionIn: "right bottom",
  backgroundPositionOut: "left bottom",
  transitionOut: 0.5,
  gradient: {
    deg: "135deg",
    from_color: "#0f4c81 50%",
    to_color: "#fa7268 50%"
  },
  question: "🤔 Are you sure?",
  success: {
    message: "👍 Success!",
    color: "#00b16a"
  },
  timeout: 3000
});

Changelog:

01/03/2019

• Refactoring