Only show these results:

How to Build a Complete Email Management Interface

Looking to build a custom email interface using the customizable, ready-to-use Nylas Mailbox and Composer Components. With these pre-built UI components and integration with the Nylas API, you can quickly create a complete email management interface customized for your team.

In this guide, you'll set up a complete email app using Nylas Components in a simple React app.

What Are Nylas Components?

The Nylas Components are pre-built, modular UI components that can be added to any website. They are web components, which means that they can be integrated into any website which can load JavaScript and display an HTML element, no additional frameworks required. Being pre-built means you get up and running quickly, and the availability of a full set of custom options lets you customize components to meet your needs.

Additionally, Nylas Components are set up for easy integration with the Nylas APIs. This integration allows for robust functionality without draining developer resources. For more information on the APIs and how they can improve your workflow, check out the docs.

In this guide, you'll focus on the Mailbox and the Composer components. Combined, they provide a fully-fledged email management interface, and it can be set up from scratch in about 30 minutes.

Prerequisites

  • If you're new customer, sign up for an account with Nylas.
  • If you're an existing customer, create a new app in the Nylas dashboard to start testing.

Component Setup

We’ll walk through the same basic steps to set up and configure the Mailbox and Composer components.

Mailbox

Under Components in the menu, select Mailbox:

Nylas Mailbox Component tile in the dashboard

This will take you to the component setup screen. Select your connected account, and enter your access token. Also, enter * under Allowed domains. This will make your component accessible from any domain, including localhost . Alternatively, feel free to enter your preferred domain. It should look like this:

Nylas components, showing allowed domains

Click on Save new component. You should then see several configuration properties. At the bottom, you will see instructions for adding the component to your app. Save the code snippet which contains your component ID.

<nylas-mailbox id="YOUR-MAILBOX-ID" > </nylas-mailbox>   

Composer

Head back to Components on the side menu, and select Composer:

Nylas Composer tile in the dashboard

Again, select your connected account, enter your access token, and add an allowed domain. Click Save new component. At the bottom, you will see instructions for adding the component to your app. Again, save the code snippet which contains your component ID.

<nylas-composer id="YOUR-COMPOSER-ID" > </nylas-composer>   

Set Up Your React Project

To pull together all of the components, you will create a basic React project. Open up a terminal and run npx create-react-app &lt;my-app-name> and follow the steps.

Once done, open up your new project folder with your editor of choice. First, let’s install the packages related to our components. Run npm i @nylas/components-mailbox@canary @nylas/components-composer@canary to install the latest canary release versions.

Go to src/App.js and replace the code there with the following, making sure to insert your Mailbox and Composer component IDs.

import './App.css';
import '@nylas/components-mailbox';
import '@nylas/components-composer';

function App() {
return (
<div className="App">
<nylas-mailbox id="c70ff084-a2cf-4bef-8fb8-9f767ea0f0bd"></nylas-mailbox>
<nylas-composer id="4aed9955-007d-4096-a63e-badae043e622"></nylas-composer>
</div>
);
}

export default App;

This will load the current version of the Mailbox and Composer components and use the IDs you provide to load your registered instance, complete with Nylas API integration. You should see something like this for the Mailbox:

Mailbox with demo data

The Composer will look like this:

Composer with demo data

Integrate Mailbox Components

Now that you've done a quick proof of concept with React and the Mailbox and Composer components, let’s integrate the components and then build what you need to support email forwarding.

First, let’s add a bit of styling to the Composer. Put it in a div and overlay it on the bottom-right side.

      <div
style={{
position: 'absolute',
width: '60%',
margin: 'auto',
right: '0',
bottom: '0',
zIndex: 2,
}}
>
<nylas-composer
id="4aed9955-007d-4096-a63e-badae043e622"
></nylas-composer>
</div>

Next, let’s close the Composer by default but add a button for opening it. You'll need to create a ref for this, and then use it in an effect to close the component on load.

  const composerRef = useRef(null);
useEffect(() => {
if (!composerRef.current) return;

composerRef.current.close();
}, [composerRef]);

Then, you can add a button to open the composer when you want to compose a new message. Let’s create an openComposer function, as shown below:

  const openComposer = useCallback(() => {
if (!composerRef.current) return;

composerRef.current.open();
}, [composerRef]);

You add a button:

  <button onClick={openComposer}>Compose a new message</button>   

You should have a Mailbox that looks like this:

Nylas Composer and Mailbox

We already have a functioning mailbox! But we can do even better.

Set Up Forwarding

First, let’s show the forward button in the mailbox component.

     <nylas-mailbox
id="<your-mailbox-id>"
show_forward={true}
></nylas-mailbox>

From there, you should see the forward button appear when you click on an email:

Mailbox component showing forward button

However, the button doesn’t do anything yet. Let’s wire it up. We’ll need a mailbox ref and an effect to set up the event.

const mailboxRef = useRef(null);
useEffect(() => {
const mailbox = mailboxRef.current;
if (!mailbox) return;

mailbox.addEventListener(`forwardClicked`, openComposer);

return () => {
mailbox.removeEventListener(`forwardClicked`, openComposer);
};
}, [mailboxRef, openComposer]);

Don’t forget to add the ref to the component, as shown below.

      <nylas-mailbox
id="<your-mailbox-id>"
ref={mailboxRef}
show_forward={true}
></nylas-mailbox>

From there, let’s go back to the openComposer function and add a bit of logic to bring in the original message text to the new draft. First, let’s create a small helper function to help us with the formatting:

const formatForwardBody = (body) =>
`<div><br/><div>---------- Forwarded message ---------</div><br/>${body}</div>`;

Then, let’s add an event parameter to the openComposer function. If it matches forwardClicked, we will pre-populate the draft before opening the Composer window.

const openComposer = useCallback(
(event) => {
if (!composerRef.current) return;

if (event) {
const message = event?.detail?.message;
switch (event?.type) {
case `forwardClicked`:
composerRef.current.value = {
body: formatForwardBody(message.body),
files: message.files,
subject: `Fwd: ${message.subject}`,
thread_id: message.thread_id, // Required to ensure fwds/threads are associated to a thread
};
break;
default:
break;
}
}
composerRef.current.open();
},
[composerRef]
);

That’s it! Click forward on a message, and you’ll see your new draft populated with the body and subject based on the original message along with any attachments.

Mailbox and composer showing forwarded message

The entire source code is just 80 lines:

App.js
import './App.css';
import '@nylas/components-mailbox';
import '@nylas/components-composer';
import { useCallback, useEffect, useRef } from 'react';

const formatForwardBody = (body) =>
`<div><br/><div>---------- Forwarded message ---------</div><br/>${body}</div>`;

function App() {
const composerRef = useRef(null);
useEffect(() => {
if (!composerRef.current) return;

composerRef.current.close();
}, [composerRef]);

const openComposer = useCallback(
(event) => {
if (!composerRef.current) return;

if (event) {
const message = event?.detail?.message;
switch (event?.type) {
case `forwardClicked`:
composerRef.current.value = {
body: formatForwardBody(message.body),
files: message.files,
subject: `Fwd: ${message.subject}`,
thread_id: message.thread_id,
};
break;
default:
break;
}
}
composerRef.current.open();
},
[composerRef]
);

const mailboxRef = useRef(null);
useEffect(() => {
const mailbox = mailboxRef.current;
if (!mailbox) return;

mailbox.addEventListener(`forwardClicked`, openComposer);

return () => {
mailbox.removeEventListener(`forwardClicked`, openComposer);
};
}, [mailboxRef, openComposer]);

return (
<div className="App">
<button onClick={openComposer}>Compose a new message</button>
<nylas-mailbox
id="c70ff084-a2cf-4bef-8fb8-9f767ea0f0bd"
ref={mailboxRef}
show_forward={true}
></nylas-mailbox>
<div
style={{
position: 'absolute',
width: '60%',
margin: 'auto',
right: '0',
bottom: '0',
zIndex: 2,
}}
>
<nylas-composer
id="4aed9955-007d-4096-a63e-badae043e622"
ref={composerRef}
></nylas-composer>
</div>
</div>
);
}

export default App;

What's Next?

In this guide, we built a complete email management interface using the Nylas Mailbox and Composer components. For more information, check out the docs on the Mailbox and the Composer components.

Check out the source code at Nylas Samples repository.