Js-pattern-lock NPM

JS Pattern Lock

A JavaScript library for implementing Android-style pattern lock screens in web applications.

Installation

npm i js-pattern-lock

Usage

In your project you have to import the Instance ad the styles

import Grid from 'js-pattern-lock';
import 'js-pattern-lock/styles.css';

const grid = new Grid({
    mountRoot: hostNode, // this is mandatory to be able to host the grid instance
    patternLength: 6,
    matrix: { x: 4, y: 4 },
    css: {
        boxSize: 4,
        gap: 1.5,
        vertex: {
            colorSchema: 'green',
            size: 'md',
        }
    }
})
grid.init();

// You can also use reset the state by calling grid.resetState() and getting the current coords: grid.coords;

// If you want you can also listen the pattern snapshots as well

function subscribeChanges(coords, wrongPattern) {
    if (wrongPattern) {
      alert('Wrong pattern length');
      return;
    }
    
   console.log(coords);
  }

  grid.subscribe(subscribeChanges);