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.

• npm - npm install @memberstack/react
• yarn - yarn add @memberstack/react

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 />
		</MemberstackProvider>
	)
}

Hooks

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.

useMemberstack

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(() => {
    memberstack.getCurrentMember()
   .then(({ data: member }) => setMember(member))
   .catc
  }, [])

  if (!member) return null;

  return (
    <div>
      Welcome, {member.auth.email}
    </div>
  )
}