Mercoa 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.

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!