React Hooks

Custom React hooks for managing state and logic in NDPR-compliant applications

Overview

The NDPR Toolkit provides a set of custom React hooks to help manage state and logic in your NDPR-compliant applications. These hooks encapsulate common functionality and make it easier to implement complex features.

Available Hooks

useConsent

A hook for managing consent state and preferences.

import { useConsent } from '@tantainnovative/ndpr-toolkit';

function ConsentManager() {
  const { 
    consents,            // Current consent settings
    updateConsent,       // Function to update a specific consent
    saveConsents,        // Function to save all consents
    resetConsents,       // Function to reset consents to default
    hasConsented,        // Function to check if user has consented to a specific option
    isConsentRequired    // Function to check if consent is required
  } = useConsent();
  
  // Example usage
  return (
    <div>
      <h2>Consent Preferences</h2>
      <label>
        <input
          type="checkbox"
          checked={hasConsented('analytics')}
          onChange={(e) => updateConsent('analytics', e.target.checked)}
        />
        Analytics Cookies
      </label>
      <button onClick={() => saveConsents()}>Save Preferences</button>
    </div>
  );
}

useDSR

A hook for managing Data Subject Rights (DSR) requests.

import { useDSR } from '@tantainnovative/ndpr-toolkit';

function DSRManager() {
  const { 
    requests,            // List of DSR requests
    submitRequest,       // Function to submit a new request
    updateRequest,       // Function to update an existing request
    getRequestById,      // Function to get a request by ID
    filterRequests       // Function to filter requests by criteria
  } = useDSR();
  
  // Example usage
  const handleSubmit = (formData) => {
    submitRequest({
      type: 'access',
      subject: {
        name: formData.name,
        email: formData.email,
        phone: formData.phone
      },
      description: formData.description
    });
  };
  
  return (
    <div>
      <h2>DSR Requests</h2>
      <ul>
        {requests.map(request => (
          <li key={request.id}>
            {request.subject.name} - {request.type} - {request.status}
          </li>
        ))}
      </ul>
    </div>
  );
}

useDPIA

A hook for managing Data Protection Impact Assessment (DPIA) state.

import { useDPIA } from '@tantainnovative/ndpr-toolkit';

function DPIAManager() {
  const { 
    assessment,          // Current DPIA assessment
    currentStep,         // Current step in the DPIA process
    totalSteps,          // Total number of steps
    goToStep,            // Function to navigate to a specific step
    nextStep,            // Function to go to the next step
    prevStep,            // Function to go to the previous step
    updateAnswer,        // Function to update an answer
    calculateRisk,       // Function to calculate risk score
    generateReport       // Function to generate a DPIA report
  } = useDPIA();
  
  // Example usage
  return (
    <div>
      <h2>DPIA Questionnaire</h2>
      <p>Step {currentStep} of {totalSteps}</p>
      <button onClick={prevStep} disabled={currentStep === 1}>Previous</button>
      <button onClick={nextStep} disabled={currentStep === totalSteps}>Next</button>
      <button onClick={generateReport}>Generate Report</button>
    </div>
  );
}

useBreach

A hook for managing data breach notifications and assessments.

import { useBreach } from '@tantainnovative/ndpr-toolkit';

function BreachManager() {
  const { 
    breaches,            // List of breach reports
    currentBreach,       // Currently selected breach
    submitBreachReport,  // Function to submit a new breach report
    updateBreachStatus,  // Function to update breach status
    assessRisk,          // Function to assess breach risk
    generateReport       // Function to generate regulatory reports
  } = useBreach();
  
  // Example usage
  return (
    <div>
      <h2>Data Breach Management</h2>
      <ul>
        {breaches.map(breach => (
          <li key={breach.id}>
            {breach.title} - {breach.status} - Risk Level: {breach.riskLevel}
          </li>
        ))}
      </ul>
    </div>
  );
}

usePrivacyPolicy

A hook for managing privacy policy generation and customization.

import { usePrivacyPolicy } from '@tantainnovative/ndpr-toolkit';

function PrivacyPolicyManager() {
  const { 
    policy,                  // Current privacy policy
    selectedTemplate,        // Selected policy template
    organizationInfo,        // Organization information
    selectTemplate,          // Function to select a template
    updateOrganizationInfo,  // Function to update organization info
    toggleSection,           // Function to toggle a section on/off
    updateSectionContent,    // Function to update section content
    updateVariableValue,     // Function to update a variable value
    generatePolicy,          // Function to generate the policy
    getPolicyText,           // Function to get the policy text
    resetPolicy,             // Function to reset the policy
    isValid                  // Function to check if policy is valid
  } = usePrivacyPolicy();
  
  // Example usage
  return (
    <div>
      <h2>Privacy Policy Generator</h2>
      <button onClick={() => selectTemplate('standard')}>
        Use Standard Template
      </button>
      <input
        type="text"
        value={organizationInfo.name}
        onChange={(e) => updateOrganizationInfo('name', e.target.value)}
        placeholder="Organization Name"
      />
      <button onClick={generatePolicy} disabled={!isValid()}>
        Generate Policy
      </button>
      <div>
        <h3>Preview</h3>
        <div>{policy?.fullText}</div>
      </div>
    </div>
  );
}

Best Practices

  • Use hooks at the top level - Always use React hooks at the top level of your component, not inside loops, conditions, or nested functions.
  • Combine with context - For global state management, consider using these hooks with React Context to share state across components.
  • Customize storage options - Most hooks accept storage options to customize how data is persisted. Use this to implement your own storage mechanisms.
  • Handle loading states - Check for loading states before rendering components that depend on data from hooks.