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
License
MIT Licensed. Copyright (c) WinterCore 2019.