Pattern Lock Library For Web App – PatternLockJS

Category: Form , Javascript | September 16, 2018
Views Total:4,511 views
Official Page:Go to website
Last Update:September 16, 2018


Pattern Lock Library For Web App – PatternLockJS


Just another JavaScript library (es6) that lets you create a canvas based pattern lock screen to protect content on the web app.

Fully customizable and styleable. Currently comes with 3 built-in themes: default, success, and failure.

How to use it:

Install the PatternLockJS with NPM or Yarn.

# Yarn
$ yarn add @phenax/pattern-lock-js

$ npm install @phenax/pattern-lock-js --save

Import the PatternLockJS.

import PatternLock from '@phenax/pattern-lock-js';

Create a canvas element for the pattern lock.

<canvas id="example"></canvas>

Create a new pattern lock screen.

const myLock = PatternLock({
      $canvas: document.querySelector('#example')

Customize the height/width of the pattern lock.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      width: 300, // default
      height: 430 // default

Set the number of grids.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      grid: [3, 3]

Set the theme.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      theme: 'default' // or success, and failure

Or create your own styles:

  colors: {
    accent: '#1abc9c',     // Accent color for node
    primary: '#ffffff',    // Primary node and line color
    bg: '#2c3e50',         // Canvas background color
  dimens: {
    node_radius: 20,       // Radius of the outer ring of a node
    line_width: 6,         // Thickness of the line joining nodes
    node_core: 8,          // Radius of the inner circle of a node
    node_ring: 1,          // Outer ring thickness

Perform an action after you draw the pattern.

myLock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());

Check if the hash code matches the password.

.onSuccess(() => lock.setTheme('success'))
.onFailure(() => lock.setTheme('failure'));



  •   Toggle button text change


  • Fixed: Empty pattern (no nodes), returns ‘MA==’

You Might Be Interested In:

Leave a Reply