@planningcenter/wrapped

This package enables adding a Planning Center Wrapped banner to your app with ease! Exported as a React component, it includes everything needed. All you need to do is supply viewable permissions!

Light mode

Dark mode

Installation

Add the package

It's a private repo, so you need to supply the auth token or grab it from our private gem repo

yarn add @planningcenter/wrapped

Add the banner to your layout

<ThemeProvider className="product-wrap">
  <div className="topbar-wrap">
    <PcoWrappedBanner canView={currentPerson.can_view_wrapped} />
    <HomeTopbar {...context.topbar} autoMountAddon={autoMountAddon} />
  </div>
  ...
</ThemProvider>

That's it!

Development

I didn't have time to create a dummy app to develop from. For now, home is easiest app to spin up and develop from.

Clone the repo

git clone [email protected]:planningcenter/wrapped.git

cd into the gem and start the microbuild watcher.

This will automatically output the built JS file.

cd pco-wrapped && yarn dev

If you need to re-build JS without running the watcher you can run

yarn build

Contributing

Commit changes, submit a PR, then release a new version!