> For the complete documentation index, see [llms.txt](https://developers.memberspace.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.memberspace.com/javascript-api/guides/member-info-spa.md).

# Getting Member Information - SPA

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 [*.ready*](/javascript-api/overview/events.md#memberspace-ready) event when initialized. For reliable access to [*memberInfo*](/javascript-api/overview/structures-and-examples/structures.md#memberinfo) use the following Promise function that incorporates a few different components of the MemberSapce JavaScript API.

```javascript
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
});
```

{% hint style="info" %}
This is very useful when you need this information only in specific screens or specific components in frameworks such as React, Angular and Vue.
{% endhint %}