Smart Back

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.

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:

• Node.js >= v10.5.0, use nvm - install instructions
• Yarn >= v1.7.0 - install instructions ("Alternatives" tab)

License

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