@nylas/react

Nylas React Components

React components for Nylas Scheduler

Requirements

• Node.js v20 or higher
• React.js v18 or higher

Compatibility Notice

Note: This package is not compatible with Turbopack. Stencil uses custom elements, decorators, and mixed module formats to build React wrappers, which Turbopack's strict ESM processing cannot properly handle. Please use Webpack or another bundler instead.

Installation

Install Nylas React Components via npm:

npm install @nylas/react@latest

or yarn

  yarn add @nylas/react@latest

Getting Started

The following example adds the Nylas Scheduler Editor and Scheduling components to your React app.

⚠️ Important: Make sure to replace the NYLAS_CLIENT_ID with your Nylas Client ID. Your Nylas Client ID can be found in your app's Overview page on the Nylas Dashboard.

Adding the Components

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { NylasSchedulerEditor, NylasScheduling } from '@nylas/react';

function App() {
  // Get the configuration ID from the URL query string
  const urlParams = new URLSearchParams(window.location.search);
  const configId = urlParams.get('config_id') || '';

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <div>
              <a href="/scheduler-editor" className="button">
                View Scheduler Editor
              </a>
              <NylasScheduling configurationId={configId} schedulerApiUrl="https://api.us.nylas.com" />
            </div>
          }
        />
        <Route
          path="/scheduler-editor"
          element={
            <div>
              <NylasSchedulerEditor
                schedulerPreviewLink={`${window.location.origin}/?config_id={config.id}`}
                nylasSessionsConfig={{
                  clientId: 'NYLAS_CLIENT_ID', // Replace with your Nylas client ID from the previous
                  redirectUri: `${window.location.origin}/scheduler-editor`,
                  domain: 'https://api.us.nylas.com/v3', // or 'https://api.eu.nylas.com/v3' for EU data center
                  hosted: true,
                  accessType: 'offline',
                }}
                defaultSchedulerConfigState={{
                  selectedConfiguration: {
                    requires_session_auth: false, // Creates a public configuration which doesn't require a session
                    scheduler: {
                      // The callback URLs to be set in email notifications
                      rescheduling_url: `${window.location.origin}/reschedule/:booking_ref`, // The URL of the email notification includes the booking reference
                      cancellation_url: `${window.location.origin}/cancel/:booking_ref`,
                    },
                  },
                }}
              />
            </div>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

Start a local development server

To create a Scheduling Page from the Scheduler Editor, you'll need a working Scheduler UI. To do this, run a local server to host your Scheduler Editor and Scheduling Pages.

Navigate the root directory of your project and run the following command.

npm run dev -- --port <PORT>

After you run the command, open your browser to http://localhost:<PORT>/scheduler-editor to see your Scheduler Editor and create your first Scheduling Page.

Links

For a complete walkthrough on setting up Scheduler can be found at https://developer.nylas.com/docs/v3/quickstart/scheduler, with the complete code available on GitHub.

Further reading:

• Scheduler documentation
• Scheduler API reference
• Developer Forums