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.

So for example :

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).

disabled `Boolean` default : false

Makes the pattern input disabled (turns gray and user input is disabled).

invisible `Boolean` default : false

Hides the lines that connect the pattern points.

noPop `Boolean` default : false

Disables the pop animation when a point gets activated.

pointActiveSize `Number` default : 30

The active area of each of the points.
When the cursor enters this area the point will be activated.

Activate areas are indicated by the blue squares.

Extra

You can override the default colors for (disabled, success, error) using css Check the codepen example for more info