@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

or

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

or

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:

DeveloperModeProvider

A component which returns a React Context.Provider and accepts any valid React children.

Props

• maxCount: When count reaches this value, developer mode is enabled.

Returns

All children of this component can call useDeveloperMode to access the developer mode Context object.

useDeveloperMode

A hook that returns the current value of the Context.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library