React Component Library

Setup

npm install --save @mercoa/react

yarn add @mercoa/react

Usage

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

The Mercoa React component library uses a React Context called MercoaSession. You can wrap your full app with this context, or only include it on specific routes and pages. All Mercoa components need to be inside a valid MercoaSession component.

The MercoaSession component handles authentication and provides a React Context called MercoaContext to its children, which encodes all the information you need to build your frontend. Within the MercoaSession component, you can either:

• Use Mercoa’s pre-built customizable React components (recommended for most use cases)
• Use the useMercoaSession hook to access Mercoa data directly

The useMercoaSession hook provides information on the current Entity, User, selected Invoice and more. It also provides an authenticated MercoaClient instance that you can use to interact with the Mercoa API (see the JavaScript SDK for more details).

Basic Usage

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

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

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

1
<MercoaSession googleMapsApiKey={'YOUR_API_KEY'} />

Components

Components are documented at react.mercoa.com!