NDPRProvider

App-level configuration provider for the NDPA Toolkit. Supplies organisation details, locale strings, and an error boundary in one place — every nested toolkit component reads from it via the useNDPRConfig hook.

Overview

NDPRProvider is the top-level configuration provider for the toolkit. It does three things:

Stores cross-cutting configuration (organisation name, DPO email, NDPC registration number, locale strings) in a React Context that every nested component can read.
Optionally applies a small set of brand CSS variables (--ndpr-primary, --ndpr-primary-hover, --ndpr-primary-foreground) when a theme is supplied — for the full token surface, prefer NDPRThemeProvider.
Wraps children in an NDPRErrorBoundary so a rendering crash in any toolkit component does not bring down the host app.

NDPRProvider is optional — every component works without one. Use it when you want to (a) avoid repeating organizationName / dpoEmail across multiple forms, (b) ship a non-English UI, or (c) want a managed error boundary around the toolkit surface.

Production Readiness

Use this checklist when moving NDPRProvider from demo mode into a customer-facing workflow. Pair the UI package with the source templates in @tantainnovative/ndpr-recipes so validation, persistence, and audit behavior live in your own backend.

Import path

Use

Production role

@tantainnovative/ndpr-toolkit

NDPRProvider, useNDPRConfig

App-level organization, DPO, storage, theme, and error-boundary configuration.

@tantainnovative/ndpr-toolkit/core

useNDPRLocale, defaultLocale, yorubaLocale, igboLocale, hausaLocale, pidginLocale

Locale-aware copy and merged fallback strings for toolkit components.

@tantainnovative/ndpr-toolkit

NDPRThemeProvider

Pair with NDPRProvider when brand tokens need full CSS-variable control.

@tantainnovative/ndpr-recipes

src/nextjs/app-router/layout-example.tsx

Reference root layout showing provider, theme, locale, and metadata wiring.

Implementation checklist

Set the legal organization name, DPO/privacy email, NDPC registration number, and storage prefix from trusted configuration.
Wire onError to production monitoring so toolkit render failures are visible to the engineering owner.
Choose one root provider for the app unless a sub-brand genuinely needs different copy or storage keys.
Review locale strings with fluent speakers and privacy owners before shipping non-English flows.
Document which environment owns provider values so staging and production do not drift.

Backend notes

Load provider values from environment or organization settings rather than hard-coded demo strings.
Keep DPO email and organization identity synchronized with public policy, DSR, and breach notification records.
Use storageKeyPrefix to separate tenants, sub-brands, or test environments on shared domains.
Treat provider locale and theme changes as release changes because they affect public-facing legal UX.

Testing notes

Render every major component under the provider and confirm organization and DPO details appear correctly.
Trigger a controlled component error and confirm onError reaches the monitoring service.
Check all enabled locales for missing labels, truncation, and legal meaning changes.
Verify staging and production use distinct storage prefixes when they share a browser domain.

Common mistakes

Leaving sample organization names or DPO emails in production configuration.
Nesting providers accidentally and overriding locale or organization details in part of the app.
Using translated strings without privacy/legal review.
Relying on the error boundary without forwarding errors to monitoring.

Quickstart

import { NDPRProvider } from '@tantainnovative/ndpr-toolkit';
import { yorubaLocale } from '@tantainnovative/ndpr-toolkit/core';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <NDPRProvider
      organizationName="Acme Nigeria Ltd"
      dpoEmail="dpo@acme.ng"
      ndpcRegistrationNumber="NDPC/REG/0001"
      locale={yorubaLocale}
      onError={(error, info) => {
        // forward to Sentry / Bugsnag / etc.
        console.error('[NDPR]', error, info);
      }}
    >
      {children}
    </NDPRProvider>
  );
}

Props (NDPRConfig)

Prop	Type	Description
`organizationName`	`string`	Official organisation name. Used by policy templates, DSR confirmations, and breach reports.
`dpoEmail`	`string`	Data Protection Officer email. Surfaced in privacy policies, DSR receipts, and regulatory reports.
`ndpcRegistrationNumber`	`string`	Optional NDPC registration number for organisations on the data-controller register.
`storageKeyPrefix`	`string`	Prefix applied to any localStorage / sessionStorage keys components use. Useful when multiple sub-brands share a domain.
`unstyled`	`boolean`	When `true`, every toolkit component strips its default classes (equivalent to passing `unstyled` per-component).
`theme`	`{ primary?; primaryHover?; primaryForeground? }`	Minimal brand overrides. For the full `--ndpr-*` token surface, use NDPRThemeProvider.
`locale`	`NDPRLocale`	Partial locale overrides. Missing keys fall back to the English defaults via `mergeLocale`. Bundled locales: `defaultLocale`, `yorubaLocale`, `igboLocale`, `hausaLocale`, `pidginLocale`.
`fallback`	`ReactNode \| (error, reset) => ReactNode`	Custom error-boundary UI. If omitted, a minimal red "Something went wrong" panel is shown.
`onError`	`(error: Error, info: ErrorInfo) => void`	Called when the boundary catches a render error — wire this to your monitoring service.

Hooks: useNDPRConfig and useNDPRLocale

Two hooks read from the provider. They are safe to call without a provider — they return an empty config / the English locale respectively.

// useNDPRConfig — exported from the root entry
import { useNDPRConfig } from '@tantainnovative/ndpr-toolkit';

function PolicyHeader() {
  const { organizationName, dpoEmail } = useNDPRConfig();
  return (
    <header>
      <h1>{organizationName} Privacy Policy</h1>
      <p>Contact: {dpoEmail}</p>
    </header>
  );
}

// useNDPRLocale — exported from /core (returns the merged locale,
// so every key is always present and non-nullable)
import { useNDPRLocale } from '@tantainnovative/ndpr-toolkit/core';

function ConsentTitle() {
  const locale = useNDPRLocale();
  return <h2>{locale.consent.title}</h2>;
}

Nested providers

Nesting NDPRProvideris supported — the innermost provider wins for any field it sets. The locale, however, does not merge across nesting: an inner provider's locale prop fully replaces the outer one (missing keys fall back to English, not to the outer locale). Most apps use a single provider at the root.

Error boundary

The provider wraps its children in NDPRErrorBoundary. If any toolkit component throws during render, the boundary catches it, calls onError if provided, and renders fallback. Pass a function-style fallback to get the reset handle:

<NDPRProvider
  fallback={(error, reset) => (
    <div role="alert">
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <App />
</NDPRProvider>