misprint

Misprint — simple and tiny library, that lets you quickly add a typo notifyer to your site.

• 279 bytes (minified and gzipped). It uses Size Limit to control size.
• Only one exported function.
• Reassignable keystroke.
• Full control of the message.

import { bindTypoHandler } from misprint
 
const messageFormatter = (url, typo, paragraph) =>
`Hi!
You made a typo: ${typo}
Whole paragraph: ${paragraph}
Link: ${url}`
 
bindTypoHandler(
    '[e-mail]',
    'Typo on your website',
    messageFormatter
)

ES Modules

Misprint avaliable as ES Module, so you can install from npm and use it with any modern bundling system.

npm install misprint

Or even with browser from CDN in supported browsers.

<script type="module" src="https://cdn.jsdelivr.net/npm/misprint/index.js'"></script>
<script type="module">
  import { bindTypoHandler } from misprint
</script> 

Custom keystroke

bindTypoHandler accepts button predicate as 4th parameter. Default Ctrl+Enter predicate looks like this:

/**
 * Predicate to test key input
 * @name KeyPredicate
 * @param {KeyboardEvent} e - event triggered on key down
 * @returns {boolean} 
 */
const ctrlEnter = e => (e.ctrlKey || e.metaKey) && e.keyCode === 13

If you want to assign other keystroke, pass custom predicate to function.

const ctrlU = e => (e.ctrlKey || e.metaKey) && e.keyCode === 85
 
bindTypoHandler(
    '[e-mail]',
    'Typo on your website',
    messageFormatter,
    ctrlU
)

If you want to assign ctrl+* keystroke, dont forget to check e.metaKey. It's command (⌘) key in macOS.