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.