react-attack 1.0.5 → 1.1.0
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 +13 -69
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# react-attack
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
|
|
3
5
|
You can pass a react component or html element and append it where you want.
|
|
4
6
|
|
|
5
7
|
**React Attack** by [Dario Passariello](https://dario.passariello.ca) (c)
|
|
@@ -8,11 +10,8 @@ You can pass a react component or html element and append it where you want.
|
|
|
8
10
|
[](https://npmjs.org/package/react-attack)
|
|
9
11
|
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
15
|
|
|
17
16
|
|
|
18
17
|
## install
|
|
@@ -31,19 +30,15 @@ import ReactAttack from "react-attack"
|
|
|
31
30
|
|
|
32
31
|
```js
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"component", // <-- ID of container
|
|
39
|
-
<div>HTML</div> // <-- Example with HTML
|
|
40
|
-
)
|
|
41
|
-
}
|
|
33
|
+
ReactAttack(
|
|
34
|
+
"body", // <-- Append to body
|
|
35
|
+
"component", // <-- ID of container
|
|
36
|
+
<div>HTML</div> // <-- Example with HTML
|
|
42
37
|
)
|
|
43
38
|
|
|
44
|
-
or
|
|
39
|
+
or using a component
|
|
45
40
|
|
|
46
|
-
//
|
|
41
|
+
// You create a component on-fly as Test + useState!
|
|
47
42
|
const TestComponent = () => {
|
|
48
43
|
const [test, setTest] = useState("Hello World")
|
|
49
44
|
return (
|
|
@@ -53,61 +48,10 @@ import ReactAttack from "react-attack"
|
|
|
53
48
|
)
|
|
54
49
|
}
|
|
55
50
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"component", // <-- ID of container
|
|
61
|
-
<TestComponent /> // <-- React Component
|
|
62
|
-
)
|
|
63
|
-
}
|
|
51
|
+
ReactAttack(
|
|
52
|
+
"body", // <-- Append to body
|
|
53
|
+
"component", // <-- ID of container
|
|
54
|
+
<TestComponent /> // <-- React Component
|
|
64
55
|
)
|
|
65
56
|
|
|
66
57
|
```
|
|
67
|
-
|
|
68
|
-
## React Example
|
|
69
|
-
|
|
70
|
-
```js
|
|
71
|
-
|
|
72
|
-
// Example in React to create a popup into body
|
|
73
|
-
|
|
74
|
-
import React from "react"
|
|
75
|
-
import ReactAttack from "react-attack"
|
|
76
|
-
|
|
77
|
-
const MyFunction = () =>{
|
|
78
|
-
|
|
79
|
-
useEffect(
|
|
80
|
-
() => {
|
|
81
|
-
|
|
82
|
-
ReactAttack(
|
|
83
|
-
"body",
|
|
84
|
-
"component",
|
|
85
|
-
<div
|
|
86
|
-
className="modal"
|
|
87
|
-
style={
|
|
88
|
-
{
|
|
89
|
-
position:"absolute",
|
|
90
|
-
background:"white",
|
|
91
|
-
top:"20px",
|
|
92
|
-
left:"20px",
|
|
93
|
-
width:"300px",
|
|
94
|
-
height:"300px",
|
|
95
|
-
zIndex: 10,
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
>
|
|
99
|
-
Hello World
|
|
100
|
-
</div>
|
|
101
|
-
)
|
|
102
|
-
|
|
103
|
-
},[]
|
|
104
|
-
)
|
|
105
|
-
|
|
106
|
-
return null
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
Copyright by Dario Passariello (c) 2025
|
|
113
|
-
all rights reserved - <dariopassariello@gmail.com>
|
package/package.json
CHANGED
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-attack",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Append your component in any part of your html using react-attack",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-attack",
|
|
7
7
|
"react",
|
|
8
8
|
"attack",
|
|
9
9
|
"render",
|
|
10
10
|
"component",
|
|
11
|
-
"
|
|
11
|
+
"append",
|
|
12
|
+
"html",
|
|
13
|
+
"element",
|
|
14
|
+
"body",
|
|
12
15
|
"dario",
|
|
13
16
|
"passariello"
|
|
14
17
|
],
|
|
15
18
|
"license": "MIT",
|
|
16
19
|
"author": "Dario Passariello",
|
|
17
|
-
"type": "
|
|
20
|
+
"type": "module",
|
|
18
21
|
"main": "./index.tsx",
|
|
19
22
|
"types": "./index.d.ts",
|
|
20
23
|
"dependencies": {
|