Mercoa React Component Library

Setup

npm install --save @mercoa/react @mercoa/javascript

Usage

The Mercoa React component library ships with a CSS stylesheet (based on tailwindcss (opens in a new tab)) that needs to be imported.

The Mercoa React component library uses a React Context (opens in a new tab) called MercoaSession. You can wrap your full app with this context, or only include it on specific routes and pages.

This context has many useful helper methods and cached data you can learn more about here.

The <MercoaSession> requires a valid JWT token (opens in a new tab) to be passed in to authenticate the Entity (opens in a new tab) and User (opens in a new tab).

Basic Usage

import '@mercoa/react/dist/style.css'
import { MercoaSession } from '@mercoa/react'
export default function Index() {
  const token = 'YOUR_ENTITY_TOKEN' // See https://docs.mercoa.com/api-reference/entity/user/get-token
  return <MercoaSession token={token} /> // The Mercoa Session Context without any children will render the full entity portal
}

Using Components

import '@mercoa/react/dist/style.css'
import { MercoaSession, PayableDetails } from '@mercoa/react'
export default function Index() {
  const token = 'YOUR_ENTITY_TOKEN' // See https://docs.mercoa.com/api-reference/entity/user/get-token
  return (
    <MercoaSession token={token}>
      <PayableDetails invoiceId="inv_75120d92-58a2-4d05-8b3f-b8e6c01f879f " />
    </MercoaSession>
  )
}

Google Maps API Key

Some Mercoa Components, like the entity onboarding component, use the Google Maps API for address autocompletion. You can get your own Google Maps API by following the instructions here: https://developers.google.com/maps/documentation/embed/get-api-key#create-api-keys (opens in a new tab)

Once you get the key, pass it to the MercoaSession:

<MercoaSession googleMapsApiKey={'YOUR_API_KEY'} />

Remix

To use this package with Remix, you will need to add it to the serverDependenciesToBundle (opens in a new tab) in your remix.config.js

module.exports = {
  serverDependenciesToBundle: ['@mercoa/react']
}

Theme

You can setup the theme in your Mercoa Developer Settings (opens in a new tab), the the components will pull theme information from the JWT used to authenticate.