Nylas Components are a suite of UI building blocks that let you build user-facing email, calendar, and contacts functionality in minutes. Use Nylas Components with your Nylas account or by adding standard JSON data.
Front-end UIs can often be time-consuming to build, even for simple functionality. The Nylas Components are designed to help developers more quickly add communications and scheduling functionality into their app.
The Nylas Components include:
The Components repository is for people who want to modify the code and build it from the source. Visit our documentation if you are looking for the easiest way to get started with Nylas Components.
If you want to report a bug, create a feature request, or contribute code, take a look at the Contributing Guidelines.
npm i @nylas/components-email
npm i @nylas/components-mailbox
npm i @nylas/components-conversation
npm i @nylas/components-agenda
npm i @nylas/components-composer
npm i @nylas/components-contact-list
You can use <script src="https://unpkg.com/@nylas/components-agenda"></script>
(replace agenda with the component of your choice) to load components directly into the head of your page or application.
Each Component can be used with a Nylas account or by passing in a JSON object. To get a component ID, create a Nylas account, then click Components. From there you'll be able to create a new component and get an ID.
To see an example of each, check out the documentation.
import React from "react";
import "@nylas/components-agenda";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Nylas Agenda</h1>
<nylas-agenda id="c307b6e9-5da4-4efb-8095-08176ed8f361"></nylas-agenda>
</div>
);
}
import Agenda from "@nylas/components-agenda";
const staticEvents = [
{
title: "Some event that I am manipulating outside of the context of Nylas",
description: "Passed in from HTML!",
participants: [],
when: { end_time: 1600444800, object: "timespan", start_time: 1600438500 }
},
{
title: "Some I got from elsewhere",
description: "Passed in from HTML!",
participants: [],
when: { end_time: 1600449999, object: "timespan", start_time: 1600448500 }
},
{
title: "A third event of the day",
description: "Passed in from HTML!",
participants: [],
when: { end_time: 1600468500, object: "timespan", start_time: 1600458500 }
}
];
</script>
<main>
<h1>Nylas Agenda</h1>
<nylas-agenda events={staticEvents}/>
</main>
nylas/components
leverages web components so for any server-side framework like NextJS, we should import components at runtime.
// NylasAgenda.js
export default function NylasAgenda() {
useEffect(() => import("@nylas/components-agenda"), []);
return <nylas-agenda id="c307b6e9-5da4-4efb-8095-08176ed8f361" />;
}
// App.js
import NylasAgenda from "./NylasAgenda";
export default function App() {
return (
<div className="App">
<h1>Nylas Agenda</h1>
<NylasAgenda />
</div>
);
}
Please refer to our Contributing Guidelines for information about how to get involved. We welcome bug reports, questions, and pull requests.
Please view our development documentation for information about how we've built our Components.
This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.
Ensure that any new middleware requests can optionally accept an access_token
to pass through to the middleware.
You must have node version 14.0.0.
[email protected]:nylas/components.git
yarn install
.env
file in the project root and copy over the contents of .env-sample
into itAfter installing, run yarn start
, go to http://localhost:8000
in your browser
yarn cy:open
will launch our end-to-end tests in a browser
tests will automatically be run on push from push.yaml
We rebase and squash our commits here. Here's how to rebase your branch:
Run git checkout main
Run git pull
Run git checkout -
(this will take you back to the branch you were on before checking out main)
Run git rebase -i main
. This will open up Vim on your command line 🙀
Hit esc
, press w
(for write), then hit the enter
key. You may need to type a couple of random characters to see that you're able to write
Leave the first commit at the top of the file as pick
.
Write s
or squash
beside the commits you want to squash
When you're done hit esc
, press qw
(for quit + write), then hit the enter
key. You should be back on the command line.
Run git push
to push changes to your remote branch. Your branch now has your changes and the most recent commits.