🚀 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

npm install "react-pattern-lock-ts

Or with yarn:

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

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

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

[
  [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