React-pattern-lock NPM

React-Pattern-Lock

Android's pattern lock

Supports multiple sizes. eg : 2x2, 3x3, 4x4 -- 15x15.
Supports touch screens.
Many options to customize the input.

Installation

npm install react-pattern-lock

How to use

import React, { Component } from "react";
import PatternLock          from "react-pattern-lock";

// in you render method
<PatternLock
	width={ 300 }
	pointSize={ 15 }
	size={ 3 }
	path={ this.state.path }
	onChange={ (pattern) => {
		this.setState({ path : pattern });
	}}
	onFinish={() => {
		// check if the pattern is correct
	}}
/>

Props

Prop	Type	Default	Definition
size	Number	3	The size of the pattern input.
width	Number, String	"100%"	The width of the pattern wrapper.
disabled	Boolean	false	Disables the pattern input.
invisible	Boolean	false	Makes the lines that connect the points invisible.
noPop	Boolean	false	Disables the pop animation when a point gets activated.
onChange	Function	(path: number[]) => void	A Function (the first argument is the drawn path).
path	number[]	[]	The drawn path.
allowJumping	Boolean	false	Setting this to true would disable the auto activation on points that are in the middle of 2 already activated points (see details below).
allowOverlapping	Boolean	false	Allows you to select the same point multiple times (Doesn't show the pop animation on the second time).
pointSize	Number	10	The size of the pattern points (used for width and height) in pixels.
pointActiveSize	Number	30	The size (in pixels) of the active area of the pattern points.
connectorThickness	Number	2	The thickness (in pixels) of the lines that connect the points.
connectorRoundedCorners	Boolean	false	Setting this to true makes the connector edges rounded.
className	String	""	Any css classes that you might want to send to the wrapper.
success	Boolean	false	Will add "success" class to the wrapper, it will also make the points and the connectors green
error	Boolean	false	Will add "error" class to the wrapper, it will also make the points and the connectors red
style	Object	{}	Any css styles that you might want to send to the wrapper.

Pattern Representation

A pattern path is represented as an array of numbers. for example :
in a 3x3 pattern the points are numbered starting from 0 top left, and ending in 8 bottom right.

react-pattern-lock

So for example :

react-pattern-lock

This would result in an array like this [1, 3, 4, 0].

Detailed Props

size `Number` default : 3

The size of the pattern input

3 is 3x3 (9 points in total).
4 is 4x4 (16 points in total).
etc.

allowJumping `Boolean` default : false

Setting this property to true would allow you to connect 2 points that have unselected points between them (diagonally, vertically or horizontally) without the points in the middle being auto selected for you (see image below).

react-pattern-lock