https://github.com/mishamyrt/misprint

⌨️ Simple and tiny library, that lets you quickly add a typo notifyer to your site
https://github.com/mishamyrt/misprint

nano typo-notifyer vanilla-js

Last synced: 3 days ago
JSON representation

⌨️ Simple and tiny library, that lets you quickly add a typo notifyer to your site

• Host: GitHub
• URL: https://github.com/mishamyrt/misprint
• Owner: mishamyrt
• License: mit
• Created: 2020-02-15T18:11:40.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T06:03:32.000Z (almost 2 years ago)
• Last Synced: 2024-12-31T07:30:20.559Z (11 days ago)
• Topics: nano, typo-notifyer, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 942 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



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

* 255 bytes (minified and gzipped). It uses [Size Limit](https://github.com/ai/size-limit) to control size.

* Only one exported function.

* Reassignable keystroke.

* Full control of the message.

```js

import { bindTypoHandler } from misprint

const messageFormatter = (url, typo, paragraph) =>

`Hi!

You made a typo: ${typo}

Whole paragraph: ${paragraph}

Link: ${url}`

bindTypoHandler(

    '[email protected]',

    'Typo on your website',

    messageFormatter

)

```

## Formatters

There is a [document](./formatters.md) with examples of message formatting in different languages.

## ES Modules

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

```sh

npm install misprint

```

Or even with browser from CDN in [supported browsers](https://caniuse.com/#feat=es6-module).

```html

  import { bindTypoHandler } from 'https://cdn.jsdelivr.net/npm/misprint/index.js'

```

## Custom keystroke

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

```js

/**

 * 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.

```js

const altU = e => e.altKey && e.keyCode === 85

bindTypoHandler(

    '[email protected]',

    '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.