@secret-knock/react NPM

🤫✊🚪 Secret knock

A hook for handling secret knocks in React.

This also exists for React Native.

🚪 Install

// 🧶 Yarn
yarn add @secret-knock/react

// 📦 NPM
npm install --save @secret-knock/react

✊ Usage

import { useSecretKnock } from "@secret-knock/react";

useSecretKnock takes two properties:

1. The secret sequence

A mandatory string representing the correct sequence of knocks:

const { ... } = useSecretKnock("...---/...");

Character	Represents	Time
`"."`	A normal click	Less than 500 ms
`"-"`	A long press	500 ms
`"/"` or `" "`	A pause	No pressing for 1500 ms

Waiting for 2000 ms between presses will reset the sequence.

2. The optional options

If you're not satisfied, maybe you should try playing around for yourself a bit.

import { useSecretKnock } from "@secret-knock/react";
import { MyCustomButton } from "../MyCustomButton";

const { ... } = useSecretKnock("...",
    {
        component: MyCustomButton,
        longPressMs: 500,
        pauseMs: 1500,
        timeoutMs: 2000,
        resetWhenWrong: true,
    }
);

Option	Type	Default value	Description
`component`	(props) => JSX.Element	`button`	Use this if you want to use your own button instead of a good old HTML `button`
`longPressMs`	number	`500`	The amount of time to press and hold for it to register as a "long press" (`"-"`)
`pauseMs`	number	`1500`	The amount of time to pause between knocks for it to register as a pause in the input sequence (`"/"` or `" "`)
`timeoutMs`	number	`2000`	Exceeding this amount of time between knocks wil reset the input sequence.
`resetWhenWrong`	boolean	`true`	Whether or not to reset the input sequence when a wrong knock has been registered. I think it's best to keep this set to `true`, but maybe you disagree.

🤫 Example

import React from "react";
import { useSecretKnock } from "@secret-knock/react-native";

export const HiddenSecret = () => {
    // press, press, press, long press,
    // pause, press, press, press,
    // long press, long press, long press
    const secretKnockSequence = "...-/...---";

    const {
        unlocked,
        progress,
        Knocker,
        reset,
    } = useSecretKnock(secretKnockSequence);

    return (
        <div>
            <Knocker>
                Knock me!
            </Knocker>

            <div style={{ backgroundColor: "#ccc" }}>
                <div
                    style={{
                        height: "10px",
                        width: `${progress * 100}%`,
                        backgroundColor: unlocked ? "lime" : "red",
                    }}
                />
            </div>

            {unlocked && (
                <button onPress={reset}>
                    Reset
                </button>
            )}
        </div>
    );
};