React-Pattern-Lock

Fork of https://github.com/WinterCore/react-pattern-lock


$3

* 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

`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

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.

!react-pattern-lock

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.