react-pattern-lock-ts

🚀 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