Package Exports

@nylas/react
@nylas/react/dist/react.cjs
@nylas/react/dist/react.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nylas/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Nylas React Components

React components for Nylas Scheduler

npm

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.

JSPM

@nylas/react