2
0
mirror of https://github.com/tenrok/maska.git synced 2026-06-20 20:00:34 +03:00

docs: update for single package

This commit is contained in:
Alexander Shabunevich
2024-06-02 15:43:46 +03:00
parent 9b454e996a
commit 0ef436ca3d
11 changed files with 245 additions and 217 deletions
-56
View File
@@ -1,61 +1,5 @@
# Usage without a framework
## Installation
<!-- tabs:start -->
### **With NPM**
```sh
npm install maska@3
```
And then import it in your code:
```js
import { Mask, MaskInput } from 'maska'
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
```
### **From CDN / UMD**
You can use Maska directly from CDN with simple script tag. Library API will be exposed on the global `Maska` object:
```html
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/maska.umd.js"></script>
<script>
const { Mask, MaskInput } = Maska
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```
### **From CDN / ES**
For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
```html
<script type="importmap">
{
"imports": {
"maska": "https://cdn.jsdelivr.net/npm/maska@3/dist/maska.mjs"
}
}
</script>
<script type="module">
import { Mask, MaskInput } from 'maska'
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```
?> Notice that we are using `<script type="module">` in this case.
<!-- tabs:end -->
## Minimal example
Add to your input element `data-maska` attribute: