UI components for profile / consent


11013.1.93 months ago4 years agoMinified + gzip package size for @financial-times/n-profile-ui in KB



UI handlebars templates for GDPR consent

If you want to integrate a consent form into your Next app, please see this wiki guide.

Your app should render the

element and required hidden fields detailed in the guide.

Then include the consent.html template from n-profile-ui

If you want to render a 'changes saved' message, a partial is available to include in your app page

Helper functions


Accepts some user consent data (eg submitted from a form), a form of words ID and a consent source (the system code of the application sending the data eg 'next-signup'), and returns a consent record suitable for saving to the single consent store.


This works in the opposite direction to 'buildConsentRecord' - given a user's consent record (from the single consent store), plus form of words, this function will construct a view-model suitable for rendering out the consent template detailed above.


Given a string like 'lbi-categoryName-channelName' used as the name attribute of a consent form control, this will return an object keyed by the parts of that string.


Accepts a form of words ID (and optionally, a scope eg FTPINK), and returns the form of words for it from the Form of Words API. Note - this helper requires that the FOW_API_HOST environment variable is set.

Client-side helpers

If your consent form should 'auto-save' each Yes/No consent option as soon as it's changed:

LiveUpdateConsent - a class to provide 'auto-save' functionality for a consent form. See Privacy settings for a working example, and the GDPR wiki for notes on how to implement.

alternatively, if the consent form will save when its submit button is clicked, use:

UpdateOnSave - helpers to validate and extract consent values to be merged into a form payload.

ConsentMessage - a simple helper class to show / hide a message on a consent form.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.