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.

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>