MemberSpace API
  • Welcome
  • Getting Started
    • Install Code
      • Multi-subdomain site
    • Using query parameters
  • Javascript API
    • Signature
      • Events
        • MemberSpace.ready
        • MemberSpace.member.info
        • MemberSpace.member.logout
        • MemberSpace.member.registration
        • MemberSpace.conversion
      • Functions
        • MemberSpace.getMemberInfo
        • MemberSpace.getMemberMetadata
        • MemberSpace.updateMemberMetadata
        • MemberSpace.clearMemberMetadata
      • Flags
        • MemberSpace.ready
      • Structures
        • MemberInfo
    • Guides
      • Getting Member Information - SSR
      • Getting Member Information - SPA
    • Migration Guide
  • Protecting content
    • Showing/Hiding Elements
  • Embedding
    • Member Information
      • Embedding Member Info
      • Prefilling Forms
      • Available Data Types
  • Links
    • Help Center
    • Admin
    • Sign Up
Powered by GitBook
On this page

Was this helpful?

  1. Javascript API
  2. Guides

Getting Member Information - SPA

Specific examples of how to use the Javascript API.

PreviousGetting Member Information - SSRNextMigration Guide

Last updated 3 years ago

Was this helpful?

In fronted environments such as single page applications, like React, Angular or Vue, the use of Events will not work as needed because MemberSpace will only fire the event when initialized. For reliable access to use the following Promise function that incorporates a few different components of the MemberSapce JavaScript API.

const getMsReadyPromise = () =>
  new Promise(resolve => {
    if (MemberSpace.ready) {
      // Ready event is already fired, so let's not wait for it, it will not be fired again
      resolve(window.MemberSpace.getMemberInfo());
    } else {
      // MS widget is not yet ready, let's subscribe for the event
      const handleReady = ({ detail }) => {
        resolve(detail);
        // Unsubscribe ourselves, this allows GC to collect all related memory
        document.removeEventListener('MemberSpace.ready', handleReady);
      };

      // Listen to ready event
      document.addEventListener('MemberSpace.ready', handleReady);
    }
  });

// ... Somewhere in an async fn
const { memberInfo } = await getMsReadyPromise();

// ... or using Promise.then
getMsReadyPromise().then(({ memberInfo }) => {
  // your code here
});

This is very useful when you need this information only in specific screens or specific components in frameworks such as React, Angular and Vue.

.ready
memberInfo