engram-popup 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +19 -6
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -9,21 +9,29 @@ Install the package via npm:
9
9
 
10
10
  ```bash
11
11
  npm i engram-popup
12
+ ```
13
+
12
14
  Usage
15
+
13
16
  1. Import the library
14
17
  In your main JavaScript/TypeScript file:
15
18
 
16
- javascript
19
+ ```bash
17
20
  // Import styles
18
21
  import 'engram-popup/dist/index.css';
19
22
 
20
23
  // Import JavaScript functionality
21
24
  import { popup } from 'engram-popup';
25
+
26
+ ```
27
+
22
28
  2. Create a popup
23
29
  Add a div element with the data-engram-popup attribute to your HTML:
24
30
 
25
- html
31
+ ```bash
26
32
  <div class="your-popup-class" data-engram-popup="unique-popup-name"></div>
33
+ ```
34
+
27
35
  Important notes:
28
36
 
29
37
  Use a unique value for the data-engram-popup attribute (e.g., login-popup, contact-form)
@@ -35,12 +43,15 @@ Add your own CSS class (like your-popup-class) to style the popup (dimensions, b
35
43
  3. Create a trigger button
36
44
  Add a button (or any other element) with the data-engram-button attribute:
37
45
 
38
- html
46
+ ```bash
39
47
  <button data-engram-button="unique-popup-name">Open Popup</button>
48
+ ```
49
+
40
50
  The value of data-engram-button must match the value of the corresponding data-engram-popup attribute.
41
51
 
42
52
  Complete Example
43
- html
53
+
54
+ ```bash
44
55
  <!-- Trigger button -->
45
56
  <button data-engram-button="test-popup">Open Modal</button>
46
57
 
@@ -49,10 +60,10 @@ html
49
60
  <h2>Popup Content</h2>
50
61
  <p>This is your custom popup content.</p>
51
62
  </div>
52
- Styling
63
+ ```
53
64
  Add your own CSS classes to customize the appearance of your popups:
54
65
 
55
- css
66
+ ```bash
56
67
  .custom-popup-style {
57
68
  width: 400px;
58
69
  background: white;
@@ -60,6 +71,8 @@ css
60
71
  border-radius: 8px;
61
72
  /* Add your custom styles here */
62
73
  }
74
+ ```
75
+
63
76
  Notes
64
77
  You can add as many popups as needed on a single page
65
78
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "engram-popup",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "description": "A lightweight and dependency-free JavaScript library for creating popups and modals. Works via npm and CDN, and fits projects of any size — from simple landing pages to complex SPA applications.",