We want to be transparent about changes regarding our React and Next.js packages. These packages are being deprecated for new projects, but will remain available for all existing implementations.
What This Means For You
If you're a current user of our React or Next.js packages:
- Your implementation will continue to work as normal
- You can continue using these packages in your existing projects
- No action is required on your part
If you're starting a new project:
- You'll use our core DOM package, which is our recommended solution for all JavaScript frameworks
- The React and Next.js options are no longer available in the Add App modal in the Memberstack dashboard
- The DOM package provides all the functionality you need for React and Next.js projects
Why We're Making This Change
We understand that package changes can raise concerns. Here's why this change will benefit all developers:
- Framework Independence: The DOM package works seamlessly with any JavaScript framework, giving you more flexibility in your tech stack choices.
- Direct Integration: By using the DOM package, you get direct access to Memberstack's core functionality without any wrapper layers, resulting in better performance and reliability.
- Active Maintenance: Our team actively maintains and regularly updates the DOM package with new features and improvements.
Using the DOM Package
Here's a quick guide to getting started with the DOM package in any JavaScript application, including React:
1. Install the package:
npm install @memberstack/dom
2. Initialize Memberstack:
import memberstackDOM from "@memberstack/dom"
// Initialize Memberstack
const memberstack = memberstackDOM.init({
publicKey: "pk_..." // Your public key
})
3. Common Authentication Examples:
// Open login modal
await memberstack.openModal("LOGIN")
// Open signup modal (for free plans)
await memberstack.openModal("SIGNUP", {
signup: {
plans: ["freePlan1"] // Replace with your free plan ID
}
})
// Handle modal responses
memberstack.openModal("LOGIN")
.then(({ data, type }) = {
console.log("Login event type:", type)
console.log("Returned data:", data)
memberstack.hideModal() // Close the modal after success
})
// Get current member
const member = await memberstack.getCurrentMember()
// Listen for auth changes
const listener = memberstack.onAuthChange(member = {
if (member) {
console.log("Member is authenticated:", member)
} else {
console.log("Member is not authenticated")
}
})
// Cleanup listener when needed
listener.unsubscribe()
4. Member Management Examples:
// Update member custom fields
await memberstack.updateMember({
customFields: {
country: "Canada"
}
})
// Get member JSON data
const memberJson = await memberstack.getMemberJSON()
// Update member JSON data
await memberstack.updateMemberJSON({
json: {
...memberJson,
preferences: {
theme: "dark"
}
}
})
5. Checkout and Billing Examples:
// Purchase plans
await memberstack.purchasePlansWithCheckout({
priceId: "prc_..." // Your price ID
})
// Launch billing portal
await memberstack.launchStripeCustomerPortal()
Resources and Support
To help you get started with the DOM package:
Need Help?
Here's how to get the right support for your needs:
- For general questions about the DOM package and its features, our support team is here to help. Create a support ticket here
- For React/Next.js specific implementations, please note that our support team is not specialized in React development. We recommend:
- Working with one of our vetted Memberstack Experts here
- Consulting with your development team
Thank you for your understanding and continued support of Memberstack. We believe these changes will help us provide better service and support to all our users.
Comments
0 comments
Article is closed for comments.