smart-back

Smart gesture for navigation across web application

Usage no npm install needed!

<script type="module">
  import smartBack from 'https://cdn.skypack.dev/smart-back';
</script>

README

smart back hero image

Smart Back

license npm latest package js minified css minified code coverage

Available on the npm.

Motivation

A lot of smartphones have smart gestures, but not all. Browser helps to deliver the same functionality on almost any device. Using smart gestures on the web can be a good idea. Also, we have possibility to customize display and behavior.

Try it

Open Demo. Turn on device toolbar. Swipe in from the edge of the screen to the center as shown below.

smart back hero image

How to use

Install SmartBack

npm i smart-back

Import styles

import "smart-back/dist/smart-back.min.css";

Import SmartBack

import SmartBack from "smart-back";

Create SmartBack instance

const smartBack = new SmartBack();

You can destroy SmartBack

smartBack.destroy();

Options

const options = {
  transitionDuration: 140,
  arrowTriggeringOffset: 2,
  staticActiveTranslateX: 40,
  enableArrowMirroring: true,
  vibration: 10,
  callback: history.back.bind(window.history),
};
Name Type Default Description
transitionDuration number 140 Arrow animation speed when activated
arrowTriggeringOffset number 2 Something like sensitivity. The number of pixels you need to swipe to activate the arrow
staticActiveTranslateX number 40 The number of pixels the arrow moves during the activation animation
enableArrowMirroring boolean true Mirroring left arrow
vibration number 10 Vibration when the arrow is activated
callback function history.back The function to be executed after a successful swipe

Development

When developing you can run:

yarn watch

Testing

yarn test
or
yarn test:watch

Building

yarn build

Developer environment requirements

To run this project, you will need:

License

This project is licensed under the terms of the MIT license.