React Memberstack is a wrapper around the @memberstack/dom package. It makes it easy to add Memberstack to any React app.

For additional functionality check out our DOM Package & Admin API

Table of contents

Getting Started

Memberstack Provider

Hooks UI Components

Logic Wrapper Components

Getting Started

This doc assumes that you have a working knowledge with React and React Hooks. If you aren't familiar with these technologies, we recommend you read the documentation first.

Install the Memberstack React package from the npm public registry, or yarn.

Memberstack Provider

After the package has been installed successfully, you can wrap the components that need access to the Memberstack object in the provided MemberstackProvider.

The MemberstackProvider receives a config prop, which contains the memberstack initialization object with DOM modifications.

import { MemberstackProvider } from "@memberstack/react"
                                                                                                           import { MemberstackProvider } from "@memberstack/react";
const config = {
	publicKey: "pk_...",
function Index() {
	return (
		<MemberstackProvider config={config}>
			<App />


Memberstack React comes packed with custom hooks. These hooks give you access to Memberstack related data plus a collection of useful methods for checking out, plan management and authentication.


The useMemberstack hook returns a reference to the memberstack instance, created by the MemberstackProvider.

import { useMemberstack } from "@memberstack/react";

function Dashboard() {
  const memberstack = useMemberstack();
  const [member, setMember] = React.useState(null);

  React.useEffect(() => {
   .then(({ data: member }) => setMember(member))
  }, [])

  if (!member) return null;

  return (
      Welcome, {}