React Component Library

Mercoa React Component Library


npm install --save @mercoa/react

yarn add @mercoa/react


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.

Basic Usage

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

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:

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

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


Components are documented at!