• React Preferences Overview
  • Installation
• Easy Usage
• Limitations

React Preferences Overview

A set of UI components for allowing your end users to manage their preferences. These set of React components supports Branding, Tenants, Draft, Sections, Topics, Digest Schedules, Status (OPTED_IN, OPTED_OUT, and REQUIRED), and Preferred Channels.

• If you're looking to implement Preferences with your own custom UI in React, we encourage you to look at react-hooks and use this repository's components as inspiration.
• If you're looking for a turnkey preferences page on other web frameworks, you could use our hosted preference page or check out our Components repository for self-hosting

Installation

yarn add @trycourier/react-provider @trycourier/react-preferences

Note: Depending on your React version, if you get a Cannot find module "prop-types" error, you will need to yarn add prop-types.

Easy Usage

import React from "react";
import { Footer, Header, PreferencesV4 } from "@trycourier/react-preferences";
import { CourierProvider } from "@trycourier/react-provider";

const PreferencePage: React.FunctionComponent<{
  tenantId?: string,
  draft?: boolean,
}> = ({ tenantId, draft = false }) => {
  return (
    <CourierProvider
      // see @trycourier/react-provider for other authorization schemes and props
      clientKey="..."
      userId=".."
    >
      <Header />
      <PreferencesV4 tenantId={tenantId} draft={draft} />
      <Footer />
    </CourierProvider>
  );
};

export default PreferencePage;

You can also check out our implementation of the self-hosted Components

Limitations

This repository is not currently fully customizable; it has opinions on components (checkboxes and radio buttons), margins, paddings, font height, gaps, etc. It does adhere to configured Brands colors and logos.