This project is designed to be a small library for adding a modal to an existing application for sharing content to a set of email addresses. It uses TypeScript, Webpack for the build pipeline, and a simplified bespoke DOM rendering and state management setup. The production bundle size is ~30KB and could be much smaller.
The modal component can be controlled via Window with the following API:
({ container: Element, initialList: string[] }) => Editor
| Name | Type | Description |
|---|---|---|
container |
Element |
A container DOM Element that is the target of the modal render |
initialList |
string[] |
An array of strings containing the initial emails to render |
Object
| Name | Type |
|---|---|
getEmailList |
() => string[] |
setEmailList |
(emailList: string[]) => void |
subscribeToEmailList |
((pl: string[], cl: string[]) => void) => void |
The index.html file contains an example script that runs the following:
const container = document.querySelector("#emails-editor");
const editor = EmailsEditor({ container, initialList: ["[email protected]"] });
editor.subscribeToEmailList(function(previousList, currentList) {
console.log(`Previous List: ${previousList}. Current List: ${currentList}.`);
});
const list = editor.getEmailList();
list.push("[email protected]");
editor.setEmailList(list);First run npm install and then npm run ${command}
This is a vanilla webpack build. The results are saved in dist/emails-editor.js
This opens a connect web server with gzip support on port 3000
A Webpack server for development that includes Redux logging
Runs the TypeScript compiler to check static types without emitting files
Same as the above command, except that it will also watch for file changes