React Component
Embed pre-built Rehabify booking and referral components into React and Next.js applications.
React Component (@rehabify/react)
Use our React component library to drop interactive booking modals and partner referral buttons into your React or Next.js applications.
Installation
Code
pnpm add @rehabify/reactCode
npm install @rehabify/reactUsage in Next.js / React
Code
'use client';
import { useState } from 'react';
import { RehabifyBookingModal, useRehabify } from '@rehabify/react';
export default function WellnessPortal() {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="p-8">
<button
onClick={() => setIsOpen(true)}
className="px-6 py-3 bg-teal-600 text-white font-semibold rounded-lg shadow-md hover:bg-teal-700"
>
Schedule Physiotherapy Session
</button>
<RehabifyBookingModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
partnerKey={process.env.NEXT_PUBLIC_REHABIFY_KEY!}
patient={{
firstName: 'Oluwaseun',
lastName: 'Bakare',
phone: '+2348039876543',
city: 'Lagos',
}}
onSuccess={(booking) => {
console.log('Booked:', booking.referralId);
setIsOpen(false);
}}
/>
</div>
);
}