@consentlayer/sdk
v0.0.2
Published
JavaScript and React SDK for ConsentLayer — read consent state, gate code on user consent, and open the preferences modal. Pairs with the ConsentLayer banner.
Maintainers
mirceaamReadme
@consentlayer/sdk
JavaScript and React SDK for ConsentLayer — read consent state, gate code on user consent, and open the preferences modal.
This SDK reads the consent cookie set by the ConsentLayer banner. You must have the banner script installed for it to work. See docs.consentlayer.com/docs/quickstart for banner setup.
Install
npm install @consentlayer/sdk
# or
pnpm add @consentlayer/sdk
# or
yarn add @consentlayer/sdkSetting up the banner
The SDK is a no-op without the banner. Add this to your <head> (no defer, no async — it must run synchronously to block tracking scripts before they fire):
<script src="https://api.consentlayer.com/banner/YOUR_PROJECT_KEY/banner.js"></script>Get your project key from app.consentlayer.com, or have an AI agent set it up via the ConsentLayer MCP server.
JavaScript API
import {
hasConsent,
getConsentState,
onConsentChange,
showPreferences,
hasConsentCookie,
getJurisdiction,
} from "@consentlayer/sdk";hasConsent(category: string): boolean
Returns true if the user has consented to the given category.
if (hasConsent("statistics")) {
loadAnalytics();
}getConsentState(): ConsentState | null
Returns the full consent object, or null if the user hasn't interacted with the banner yet.
const state = getConsentState();
// {
// version: 1,
// timestamp: 1735689600000,
// jurisdiction: "gdpr" | "ccpa" | "none",
// gpcSignal: false,
// doNotSell: false,
// categories: { essential: true, statistics: true, marketing: false },
// }onConsentChange(callback): () => void
Subscribe to consent updates. Returns an unsubscribe function.
const unsubscribe = onConsentChange((state) => {
if (state.categories.marketing) {
initFacebookPixel();
}
});showPreferences(): void
Programmatically open the preferences modal — useful for a footer "Cookie settings" link.
<button onClick={() => showPreferences()}>Cookie settings</button>hasConsentCookie(): boolean
true if the user has made a consent choice (any choice — accepted, rejected, or customized). Useful for distinguishing "no decision yet" from "decided everything is off."
getJurisdiction(): "gdpr" | "ccpa" | "none"
Returns the jurisdiction the banner detected for this user.
React API
Import from the /react subpath:
import {
ConsentLayerProvider,
useConsent,
useCategoryConsent,
ConsentGate,
} from "@consentlayer/sdk/react";Requires React 18 or later.
<ConsentLayerProvider>
Wrap your app once at the root.
import { ConsentLayerProvider } from "@consentlayer/sdk/react";
export default function App() {
return (
<ConsentLayerProvider>
<YourApp />
</ConsentLayerProvider>
);
}useConsent()
function AnalyticsLoader() {
const { hasConsent, consentState, showPreferences } = useConsent();
useEffect(() => {
if (hasConsent("statistics")) loadGA();
}, [hasConsent]);
return <button onClick={showPreferences}>Cookie settings</button>;
}useCategoryConsent(category)
Convenience hook that returns a boolean and re-renders when consent changes.
function MarketingPixel() {
const allowed = useCategoryConsent("marketing");
if (!allowed) return null;
return <FacebookPixel />;
}<ConsentGate>
Render children only if the user has consented to a category.
<ConsentGate category="marketing" fallback={<p>Enable marketing cookies to see this.</p>}>
<YouTubeEmbed videoId="..." />
</ConsentGate>TypeScript
Full types are bundled. Import the ConsentState type if you need it:
import type { ConsentState } from "@consentlayer/sdk";Framework guides
For AI coding agents
To set up ConsentLayer end-to-end (create a project, scan the site, generate the install snippet), use the MCP server:
claude mcp add consentlayer --transport http "https://api.consentlayer.com/mcp"See docs.consentlayer.com/docs/guides/ai-agents.
License
MIT