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

npm install react-pattern-lock

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
	}}
/>

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

The size of the pattern input

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

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

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

Hides the lines that connect the pattern points.

Disables the pop animation when a point gets activated.

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.

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

MIT Licensed. Copyright (c) WinterCore 2019.