sb_js-react 0.0.4 → 0.0.5
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.
- package/README.md +123 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,30 +1,129 @@
|
|
|
1
|
-
|
|
1
|
+
# sb_js Documentation
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**sb_js** is a lightweight JavaScript styling utility that lets you control styles and behaviors using HTML attributes and CSS-like syntax. This page documents how to use **sb_js (React version)** in a simple, practical way.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## ✨ Features
|
|
8
|
+
|
|
9
|
+
* Attribute-based styling (no inline CSS)
|
|
10
|
+
* Hover, click, and dynamic style updates
|
|
11
|
+
* Works with **React**
|
|
12
|
+
* Minimal setup
|
|
13
|
+
* Class-based control
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 📦 Installation
|
|
18
|
+
|
|
19
|
+
Copy the `Sb_Js.js` file into your project or install it according to your setup.
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 🚀 Basic Usage (React)
|
|
25
|
+
|
|
26
|
+
### 1️⃣ Import sb_js
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
import Sb_Js, { registerClass } from './Sb_Js';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
### 2️⃣ Register Allowed Classes
|
|
35
|
+
|
|
36
|
+
Only registered classes will be processed by **sb_js**.
|
|
37
|
+
|
|
38
|
+
```javascript
|
|
39
|
+
registerClass([
|
|
40
|
+
'para',
|
|
41
|
+
'btn',
|
|
42
|
+
'para2',
|
|
43
|
+
'hadding'
|
|
44
|
+
]);
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
> 🔒 This improves performance and avoids unwanted DOM manipulation.
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### 3️⃣ Initialize sb_js
|
|
52
|
+
|
|
53
|
+
Call `Sb_Js()` once after component mount.
|
|
4
54
|
|
|
5
55
|
```javascript
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
Sb_Js();
|
|
58
|
+
}, []);
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 🧩 Full Example
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
import React, { useEffect } from 'react';
|
|
6
67
|
import Sb_Js, { registerClass } from './Sb_Js';
|
|
7
68
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
69
|
+
function Test() {
|
|
70
|
+
registerClass(['para', 'btn', 'para2', 'hadding']);
|
|
71
|
+
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
Sb_Js();
|
|
74
|
+
}, []);
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<div>
|
|
78
|
+
<button
|
|
79
|
+
className="btn"
|
|
80
|
+
bg="green"
|
|
81
|
+
hoverbg="maroon"
|
|
82
|
+
hoverfg="white"
|
|
83
|
+
click="myPara,{font-size:120px; color:orange}">
|
|
84
|
+
click me
|
|
85
|
+
</button>
|
|
86
|
+
|
|
87
|
+
<p className="para" fg="blue" id="myPara">i'm sb_js</p>
|
|
88
|
+
|
|
89
|
+
<h1 className="hadding" fg="red" hoverfg="green" px="20px" mt="120px">
|
|
90
|
+
Hello World
|
|
91
|
+
</h1>
|
|
92
|
+
|
|
93
|
+
<p className="para2" fg="blue" bold="true" fs="20">Hello World</p>
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
30
97
|
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## ⚠ Important Notes
|
|
102
|
+
|
|
103
|
+
* Call `Sb_Js()` **only once** per page
|
|
104
|
+
* Always use `registerClass()`
|
|
105
|
+
* Works directly on DOM → avoid SSR without checks
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## 🧠 Best Use Cases
|
|
110
|
+
|
|
111
|
+
* Admin dashboards
|
|
112
|
+
* Internal tools
|
|
113
|
+
* Rapid UI prototyping
|
|
114
|
+
* Lightweight styling logic
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## 📄 License
|
|
119
|
+
|
|
120
|
+
**sb_js 2025 © Copyright Sourav Bishai**
|
|
121
|
+
|
|
122
|
+
Free to use for personal and educational projects.
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## 🔗 Links
|
|
127
|
+
|
|
128
|
+
* Documentation: [https://sbjs.netlify.app/](https://sbjs.netlify.app/)
|
|
129
|
+
|