@trycourier/react-preferences
TypeScript icon, indicating that this package has built-in type declarations

5.1.2 • Public • Published

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

self-hosted preference page

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

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

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

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @trycourier/react-preferences

Weekly Downloads

18,548

Version

5.1.2

License

ISC

Unpacked Size

108 kB

Total Files

60

Last publish

Collaborators

  • mikemilla
  • troygoode
  • scarney