react-pattern-lock-ts/README.md

PatternLock is a lightweight and customizable React component for implementing a secure and interactive pattern lock system. Perfect for authentication, games, or creative applications, it supports touch and mouse interactions with real-time state updates

## 🚀 React Pattern Lock 🔒

A customizable pattern lock component for React applications. This component creates a 3x3 grid of points that users can connect to create patterns, similar to Android's pattern lock system.

#### 📥 Installation

```bash
npm install "react-pattern-lock-ts
```

Or with yarn:

```bash
yarn add "react-pattern-lock-ts
```

---

## ✨ Features

-  Supports both mouse and touch interactions
-  Customizable styling through CSS classes
-  Optional number display on points
-  Pattern tracking and state management
-  Responsive design
-  TypeScript support

## Usage

```jsx
import PatternLock from 'react-pattern-lock-ts';
import { useState } from 'react';

function App() {
  const [patterns, setPatterns] = useState<number[][]>([]);

  return (
    <PatternLock
      setPatterns={setPatterns}
      useNumber={true}
      className="custom-bullet"
      numberClassName="custom-number"
      bgClassName="custom-background"
    />
  );
}
```

## Props

| Prop                 | Type                                          | Default            | Description                       |
| -------------------- | --------------------------------------------- | ------------------ | --------------------------------- |
| `setPatterns`        | `(value: SetStateAction<number[][]>) => void` | Required           | Function to update patterns state |
| `useNumber`          | `boolean`                                     | `false`            | Show numbers (0-8) on the points  |
| `className`          | `string`                                      | `'bullet-bYMyWeb'` | Custom class for points           |
| `numberClassName`    | `string`                                      | -                  | Custom class for numbers          |
| `bgClassName`        | `string`                                      | `'bg-bYMyWeb'`     | Custom class for background       |
| `resetStyleByChange` | `any`                                         | -                  | Trigger to reset pattern          |

## Styling

The component comes with default styles but can be customized using CSS classes. Default classes include:

-  `pattern-content-bYMyWeb`: Container styling
-  `bullet-content-bYMyWeb`: Points container styling
-  `bullet-bYMyWeb`: Individual point styling
-  `active-bullet-bYMyWeb`: Active point styling
-  `bg-bYMyWeb`: Background styling

## Example CSS

```css
.pattern-content-bYMyWeb {
   position: relative;
   width: 100%;
   aspect-ratio: 1;
}

.bullet-content-bYMyWeb {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   padding: 20px;
}

.bullet-bYMyWeb {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #ddd;
   cursor: pointer;
}

.active-bullet-bYMyWeb {
   background: #007bff;
}
```

## Pattern Data Structure

The pattern is returned as an array of numbers (0-8), representing the points in order of selection. For example:

```javascript/typescript
[
  [0, 1, 2], // First pattern
  [3, 4, 5]  // Second pattern
]
```

## Browser Support

-  Chrome (latest)
-  Firefox (latest)
-  Safari (latest)
-  Edge (latest)
-  Mobile browsers with touch support

#### 📄 License

## MIT © [Mohammad Gholami]

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Made with ❤️ using TypeScript