+
+
+
+`@nylas/react` gives you Nylas Scheduler as React components, so you can drop a booking page or a full scheduling-page editor into your app instead of building availability logic, timezone handling, and booking forms yourself. It also ships a `useNylasConnect` hook and a `NylasConnectButton` for the OAuth flow that connects a user's calendar.
+
+This repository is for contributors and anyone installing from source. If you just want to use the library in your app, head to the [**Scheduler guide**](https://developer.nylas.com/docs/v3/scheduler/) on developer.nylas.com.
-## Installation
+## Get started
-Install Nylas React Components via npm:
+1. [Sign up for a free Nylas account](https://dashboard-v3.nylas.com/register) and grab your client ID from the [Nylas Dashboard](https://dashboard-v3.nylas.com/).
+2. Register your app's callback URI under **Hosted Authentication**, so the connection flow is allowed to run.
+3. Install the package and render your first component โ see below.
+
+The [Scheduler quickstart](https://developer.nylas.com/docs/v3/getting-started/scheduler/) walks through a working setup end to end, with the finished code in [quickstart-scheduler-react](https://github.com/nylas-samples/quickstart-scheduler-react).
+
+## โ๏ธ Install
```bash
npm install @nylas/react@latest
+# or
+yarn add @nylas/react@latest
```
-or yarn
+### Requirements
+
+- [Node.js](https://nodejs.org/en/) v20 or higher
+- [React](https://react.dev/) 18 or 19
+
+The package ships its own TypeScript types, and exposes three subpaths so you only bundle what you use:
+
+| Import from | Contains |
+| --- | --- |
+| `@nylas/react` | Everything below except the Connect symbols |
+| `@nylas/react/elements` | Scheduler and booking components |
+| `@nylas/react/utils` | `NylasIdentityRequestWrapper`, and the `LANGUAGE_CODE` type |
+| `@nylas/react/connect` | `useNylasConnect`, `NylasConnectButton`, and re-exports of `@nylas/connect` |
+
+> **Note:** `useNylasConnect` and `NylasConnectButton` are available **only** from `@nylas/react/connect`, not from the package root.
+
+To install from source:
```bash
- yarn add @nylas/react@latest
+git clone https://github.com/nylas/javascript.git
+cd javascript
+pnpm install
```
-## Exports overview
+## โก๏ธ Usage
+
+### Scheduler components
-- **Elements**
- - `NylasSchedulerEditor`, `NylasScheduling`, `NylasSchedulingMethod`
- - Import from `@nylas/react` or `@nylas/react/elements`
+Three components are the entry points:
-- **Connect**
- - `useNylasConnect`, `NylasConnectButton`
- - Import from `@nylas/react/connect`
+- **`NylasScheduling`** โ the booking page your end users see.
+- **`NylasSchedulerEditor`** โ the editor where your users build and configure scheduling pages.
+- **`NylasSchedulingMethod`** โ picks a scheduling method.
-## Getting Started
+Around 50 further components (`NylasAvailabilityPicker`, `NylasBookingForm`, `NylasBufferTime`, `NylasCancellationPolicy`, `NylasTimeslotPicker`, and so on) are exported as the building blocks those two compose, alongside `NylasNotetakerConfig` and a set of form primitives and icons. Most apps only need the entry points.
+
+### Scheduler Editor
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](https://dashboard-v3.nylas.com).
-### Adding the Components
-
```jsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { NylasSchedulerEditor, NylasScheduling } from "@nylas/react";
@@ -101,11 +149,11 @@ function App() {
export default App;
```
-### Start a local development server
+### 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.
+Navigate to the root directory of your project and run the following command.
```text
npm run dev -- --port
@@ -113,20 +161,17 @@ npm run dev -- --port
After you run the command, open your browser to `http://localhost:/scheduler-editor` to see your Scheduler Editor and create your first Scheduling Page.
-
-## Nylas Connect Hook
+### useNylasConnect hook
The `useNylasConnect` hook provides a simple way to add OAuth authentication to your React app using Nylas Connect.
-### Basic Usage
-
```jsx
import { useNylasConnect } from "@nylas/react/connect";
function LoginButton() {
const { isConnected, connect, logout, grant, isLoading } = useNylasConnect({
- clientId: 'your-nylas-client-id',
- redirectUri: 'http://localhost:3000/callback'
+ clientId: "your-nylas-client-id",
+ redirectUri: "http://localhost:3000/callback",
});
if (isLoading) return
Loading...
;
@@ -141,42 +186,45 @@ function LoginButton() {
}
return (
-
+
);
}
```
+#### Configuration
-### Configuration
+`UseNylasConnectConfig` extends `ConnectConfig` from [`@nylas/connect`](https://github.com/nylas/javascript/tree/main/packages/nylas-connect), so every option there โ `apiUrl`, `defaultScopes`, `persistTokens`, `logLevel`, `codeExchange`, `identityProviderToken`, and the rest โ is accepted here too. The most common, plus the four the hook adds of its own:
| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `clientId` | `string` | - | Your Nylas Client ID |
-| `redirectUri` | `string` | - | OAuth callback URL |
-| `autoHandleCallback` | `boolean` | `true` | Automatically handle OAuth callback |
-| `autoRefreshInterval` | `number` | - | Auto-refresh session interval (ms) |
-| `retryAttempts` | `number` | `0` | Number of retry attempts for failed operations |
-| `enableAutoRecovery` | `boolean` | `false` | Enable automatic error recovery |
+| --- | --- | --- | --- |
+| `clientId` | `string` | `NYLAS_CLIENT_ID` | Your Nylas Client ID |
+| `redirectUri` | `string` | `NYLAS_REDIRECT_URI` | OAuth callback URL |
+| `autoHandleCallback` | `boolean` | `true` | Automatically handle the OAuth callback |
+| `autoRefreshInterval` | `number` | disabled | Auto-refresh session interval, in ms |
+| `initialLoadingState` | `boolean` | `true` | Loading state the hook mounts with |
+| `retryAttempts` | `number` | `0` | Retry attempts for failed operations |
+| `enableAutoRecovery` | `boolean` | `false` | Automatic recovery from network errors |
-### Hook Return Values
-
-The hook returns an object with the following properties:
+#### Return values
**State:**
-- `isConnected` - Whether user is authenticated
-- `grant` - Current user's grant information
-- `isLoading` - Loading state for operations
-- `error` - Current error, if any
+
+- `isConnected` โ whether the user is authenticated
+- `grant` โ the current user's `GrantInfo`, or `null`
+- `isLoading` โ loading state for operations
+- `error` โ current error, if any
**Actions:**
-- `connect(options)` - Start OAuth flow
-- `logout(grantId?)` - Sign out user
-- `refreshSession()` - Refresh current session
-- `subscribe(callback)` - Listen to connection events
-### Environment Setup
+- `connect(options)` โ start the OAuth flow
+- `logout(grantId?)` โ sign the user out
+- `refreshSession()` โ refresh the current session
+- `subscribe(callback)` โ listen to connection events
+- `setLogLevel(level)` โ change log verbosity at runtime
+
+The underlying client is also returned as `connectClient`, for anything the hook doesn't wrap.
+
+#### Environment setup
For security, use environment variables for your configuration:
@@ -189,20 +237,16 @@ VITE_NYLAS_REDIRECT_URI=http://localhost:3000/callback
```jsx
const { isConnected, connect } = useNylasConnect({
clientId: import.meta.env.VITE_NYLAS_CLIENT_ID,
- redirectUri: import.meta.env.VITE_NYLAS_REDIRECT_URI
+ redirectUri: import.meta.env.VITE_NYLAS_REDIRECT_URI,
});
```
+Next.js uses `NEXT_PUBLIC_` instead of `VITE_`.
-
-
-
-## Nylas Connect Button
+### NylasConnectButton
The `NylasConnectButton` component provides a simple way to add email provider authentication to your React application.
-### Basic Usage
-
```jsx
import { NylasConnectButton } from "@nylas/react/connect";
@@ -222,7 +266,18 @@ function App() {
}
```
-### External Identity Provider Integration
+Beyond `clientId` and `redirectUri`, the props fall into four groups:
+
+| Group | Props |
+| --- | --- |
+| Connection | `apiUrl`, `defaultScopes`, `persistTokens`, `method`, `provider`, `scopes`, `loginHint`, `popupWidth`, `popupHeight` |
+| Appearance | `text`, `children`, `variant` (`primary` \| `outline`), `size` (`sm` \| `md` \| `lg`), `className`, `style`, `disabled`, `unstyled`, `cssVars` |
+| Callbacks | `onStart`, `onSuccess`, `onError`, `onCancel` |
+| Advanced | `identityProviderToken`, `codeExchange` |
+
+`unstyled` drops the default styling entirely; `cssVars` re-themes it without doing so, accepting `--nylas-btn-bg`, `--nylas-btn-fg`, `--nylas-btn-border`, and `--nylas-btn-bg-hover`.
+
+### External identity providers
For applications that use external identity providers (via JWKS), you can pass identity provider tokens during authentication:
@@ -253,7 +308,9 @@ function App() {
}
```
-### Custom Backend Code Exchange
+Returning `null` continues without IDP claims; throwing fails authentication. Per-provider setup guides for Auth0, Clerk, Google, and WorkOS: [external identity providers](https://developer.nylas.com/docs/v3/auth/nylas-connect-react/use-external-idp/).
+
+### Custom code exchange
For enhanced security, you can handle the OAuth code exchange on your backend:
@@ -309,12 +366,64 @@ function App() {
}
```
-## Links
+### Error handling
+
+The hook surfaces failures on `error` rather than throwing, so render from it directly. `NylasConnectButton` reports them through `onError`, and `onCancel` fires separately when the user closes the popup.
+
+```jsx
+const { error, connect } = useNylasConnect({ clientId, redirectUri });
+
+if (error) return
Couldn't connect: {error.message}
;
+```
+
+Every error extends `NylasConnectError` and sets a distinct `name` โ `PopupError` for a blocked or closed popup, `ConfigError` for a missing `clientId`, `OAuthError` when the provider rejects the request. All of them are re-exported from `@nylas/react/connect`.
+
+## ๐ก Examples
+
+- [quickstart-scheduler-react](https://github.com/nylas-samples/quickstart-scheduler-react) โ the finished code for the Scheduler quickstart.
+- [nylas-samples](https://github.com/orgs/nylas-samples/repositories) โ full sample apps and product quickstarts.
+
+## ๐ค AI agents
+
+[nylas/skills](https://github.com/nylas/skills) drops Nylas into Claude Code, Cursor, Codex, and other agents that support the skills format:
+
+```bash
+npx skills add nylas/skills
+/plugin marketplace add nylas/skills # Claude Code
+```
+
+## ๐ Reference
+
+- **Scheduler guide:** [developer.nylas.com/docs/v3/scheduler](https://developer.nylas.com/docs/v3/scheduler/)
+- **Scheduler quickstart:** [developer.nylas.com/docs/v3/getting-started/scheduler](https://developer.nylas.com/docs/v3/getting-started/scheduler/)
+- **Scheduler API reference:** [developer.nylas.com/docs/api/v3/scheduler](https://developer.nylas.com/docs/api/v3/scheduler/)
+- **React connect guide:** [developer.nylas.com/docs/v3/auth/nylas-connect-react](https://developer.nylas.com/docs/v3/auth/nylas-connect-react/)
+- **`useNylasConnect` reference:** [every option and return value](https://developer.nylas.com/docs/v3/auth/nylas-connect-react/usenylasconnect/)
+- **`NylasConnectButton` reference:** [every prop](https://developer.nylas.com/docs/v3/auth/nylas-connect-react/nylasconnectbutton/)
+- **Identity provider guides:** [Auth0, Clerk, Google, WorkOS](https://developer.nylas.com/docs/v3/auth/nylas-connect-react/use-external-idp/)
+- **Developer forum:** [forums.nylas.com](https://forums.nylas.com/)
+- **Changelog:** [CHANGELOG.md](CHANGELOG.md)
+
+## โจ Upgrading
+
+See [`CHANGELOG.md`](CHANGELOG.md) for per-release notes.
+
+## ๐ Contributing
+
+Issues, ideas, and pull requests welcome โ see [CONTRIBUTING.md](../../CONTRIBUTING.md). Before opening a large change, please open an issue or post in the [forum](https://forums.nylas.com) so we can sanity-check the direction.
+
+## ๐ Security
+
+Found a vulnerability? Please **don't** open a public issue. Report it through our [Vulnerability Disclosure Policy](https://www.nylas.com/security/vulnerability-disclosure-policy/).
+
+## ๐ Other Nylas SDKs
-A complete walkthrough for setting up Scheduler can be found at [https://developer.nylas.com/docs/v3/getting-started/scheduler/](https://developer.nylas.com/docs/v3/getting-started/scheduler/), with the complete code available on [GitHub](https://github.com/nylas-samples/quickstart-scheduler-react).
+- [@nylas/connect](https://github.com/nylas/javascript/tree/main/packages/nylas-connect) ยท `npm install @nylas/connect`
+- [nylas-nodejs](https://github.com/nylas/nylas-nodejs) ยท `npm install nylas`
+- [nylas-python](https://github.com/nylas/nylas-python) ยท `pip install nylas`
+- [nylas-ruby](https://github.com/nylas/nylas-ruby) ยท `gem install nylas`
+- [nylas-java](https://github.com/nylas/nylas-java) ยท Maven / Gradle (Kotlin too)
-### Further reading:
+## ๐ License
-- [Scheduler documentation](https://developer.nylas.com/docs/v3/scheduler/)
-- [Scheduler API reference](https://developer.nylas.com/docs/api/v3/scheduler/)
-- [Developer Forums](https://forums.nylas.com/)
+MIT โ see [LICENSE.md](LICENSE.md).