Gathering detailed insights and metrics for @substrate-system/email
Gathering detailed insights and metrics for @substrate-system/email
Installations
npm install @substrate-system/emailDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.16.0
NPM Version
10.9.2
Score
72.1
Supply Chain
95.4
Quality
88.8
Maintenance
100
Vulnerability
84.4
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
1,459
Last Day
10
Last Week
138
Last Month
881
Last Year
1,459
Maintainers
1
Package Meta Information
Latest Version
0.0.18
Package Id
@substrate-system/email@0.0.18
Unpacked Size
136.91 kB
Size
24.41 kB
File Count
26
NPM Version
10.9.2
Node Version
20.16.0
Published on
Jul 20, 2025
Total Downloads
Cumulative downloads
Total Downloads
1,459
Last Day
-70.6%
10
Compared to previous day
Last Week
-20.7%
138
Compared to previous week
Last Month
114.9%
881
Compared to previous month
Last Year
0%
1,459
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
23
@substrate-system/button@substrate-system/css-normalize@substrate-system/debug@substrate-system/dom@substrate-system/tapzero@typescript-eslint/eslint-plugin@typescript-eslint/parserauto-changelogcssnanoesbuildeslinteslint-config-standardmarkdown-tocpostcsspostcss-clipostcss-nestingstylelintstylelint-config-standardtap-spectape-runtypedoctypescriptvite
Web component for email inputs.
featuring:
- robust client-side validation -- check that email is of the form
abc@domain.tld - good UX for validation
- errors are only shown if the input has been focused
- errors are not shown until the input blurs
- add a class to the element when it is not valid
- emit
validandinvalidevents when validity changes
Install
1npm i -S @substrate-system/email
Modules
This exposes ESM and common JS via package.json exports field.
ESM
1import { email } from '@substrate-system/email'
Common JS
1const { email } = require('@substrate-system/email')
Example
See ./example, and the demo page.
1import { SubstrateEmail } from '@substrate-system/email' 2import { SubstrateButton } from '@substrate-system/button' 3SubstrateEmail.define() 4SubstrateButton.define() 5const qs = document.querySelector 6 7const input = qs('form substrate-email') 8input?.addEventListener('valid', ev => { 9 console.log('We are valid!', ev) 10 qs('substrate-button')!.disabled = false 11}) 12 13input?.addEventListener('invalid', ev => { 14 console.log('no longer valid....', ev) 15 qs('substrate-button')!.disabled = true 16})
CSS
Bundler
The package.json exposes css, suitable for vite or esbuild:
1import '@substrate-system/email/css'
Or minified:
1import '@substrate-system/email/css/min'
CSS imports
If using a CSS processor, you can import from the CSS files:
1@import url("../node_modules/@substrate-system/email/dist/index.min.css");
Customize CSS via some variables
1substrate-email { 2 --bgc: #fafafa; 3 --color: black; 4 --focus: #005fcc; 5 --error-color: red; 6}
Use
You can set a name for this custom element with the static method
define. To use the default name, substrate-email, just import and
call .define().
[!CAUTION]
If you change the name of the web component, it will break the CSS.
1import { SubstrateEmail } from '@substrate-system/email' 2 3// create a web component named `substrate-email` 4SubstrateEmail.define()
Override the tag property to change the tag name:
1import { SubstrateEmail } from '@substrate-system/email' 2 3// set a custom name 4SubstrateEmail.TAG = 'cool-input' 5 6SubstrateEmail.define()
HTML
1<div> 2 <substrate-email></substrate-email> 3</div>
pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
1cp ./node_modules/@substrate-system/email/dist/index.min.js ./public/substrate-email.min.js 2cp ./node_modules/@substrate-system/email/dist/style.min.css ./public/substrate-email.css
HTML
1<head> 2 <link rel="stylesheet" href="./substrate-email.css"> 3</head> 4<body> 5 <!-- ... --> 6 <script type="module" src="./substrate-email.min.js"></script> 7</body>
No vulnerabilities found.