@brown-ccv/rn-use-dev-mode NPM

@brown-ccv/rn-use-dev-mode

A "developer mode" state manager for enabling developer-facing UI during production in React web and native applications.

The package provides a React Context object that keeps track of a count state variable, with an exposed increment function. When the count reaches a provided maximum, the user is asked for a PIN; if that is correct, developer mode is enabled. It's up to the developer how to handle calling the increment function.

Installation

npm install @brown-ccv/rn-use-dev-mode

yarn add @brown-ccv/rn-use-dev-mode

pnpm add @brown-ccv/rn-use-dev-mode

Usage

See the documentation for details on exported functions.

In the root component of your project, import the DeveloperModeProvider component and wrap it around all parts of the application that need access to the context object:

import { DeveloperModeProvider } from "@brown-ccv/rn-use-dev-mode";

export function SomeRootComponent() {
  // ...

  return (
    <>
      <!-- ... -->
      <DeveloperModeProvider maxCount={10} pin={"1234"}>
        <SomeChild />
      </DeveloperModeProvider>
      <!-- ... -->
    </>
  );
}

In child components, import the useDeveloperMode hook:

import { useDeveloperMode } from "@brown-ccv/rn-use-dev-mode";

export function SomeChild() {
  // ...

  const { devMode, count, incrementCount } = useDeveloperMode();

  // ...

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
      <p>{devMode ? "Dev mode is enabled!" : "Dev mode is disabled"}</p>
    </>
  );
}

Documentation

The developer mode Context object has the following structure:

devMode: a boolean, whether or not developer mode is enabled.
count: a number; when count reaches a given value, the user is prompted for the PIN.
incrementCount: a function that, when called, increments count by one.

To access the Context, the package exports two functions: