Fork of WinterCore's android's pattern lock for react 17
npm install react-17-pattern-locknpm install react-pattern-lock`
How to use
`javascript
import React, { Component } from "react";
import PatternLock from "react-pattern-lock";
// in you render method
width={ 300 }
pointSize={ 15 }
size={ 3 }
path={ this.state.path }
onChange={ (pattern) => {
this.setState({ path : pattern });
}}
onFinish={() => {
// check if the pattern is correct
}}
/>
`
$3
| 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. |
----
$3
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]`.
----
$3
#### 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
#### disabled `Boolean` default : false
Makes the pattern input disabled (turns gray and user input is disabled).
!react-pattern-lock
#### invisible `Boolean` default : false
Hides the lines that connect the pattern points.
!react-pattern-lock
#### noPop `Boolean` default : false
Disables the pop animation when a point gets activated.
!react-pattern-lock
#### pointActiveSize `Number`` default : 30