pinfield

A react-library to display and handle lock screens

Usage no npm install needed!

<script type="module">
  import pinfield from 'https://cdn.skypack.dev/pinfield';
</script>

README

pinfield

This little react-library handles the visualize features of a mobile lock-screen. This package comes with default styles from material-ui, because the styling should come from you.

NPM JavaScript Style Guide

Install

npm install --save pinfield
or
yarn add pinfield

Usage

import React from "react";
import { NumberLock, PatternLock } from "pinfield";

const Example: React.FC = () => {
  return (
    <>
      <NumberLock />
      <PatternLock gridSize={3} fields={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />
    </>
  );
};

Props

NumberLock

PatternLock

License

MIT © tendo14