react-attack 1.0.1 → 1.0.4
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 +18 -6
- package/index.d.ts +4 -4
- package/index.tsx +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
You can pass a react component or html element and append it where you want.
|
|
4
4
|
|
|
5
|
+
**React Attack** by [Dario Passariello](https://dario.passariello.ca) (c)
|
|
6
|
+
|
|
7
|
+
[](https://npmjs.org/package/react-attack)
|
|
8
|
+
[](https://npmjs.org/package/react-attack)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
5
18
|
## install
|
|
6
19
|
|
|
7
20
|
```sh
|
|
@@ -9,10 +22,9 @@ npm i -D react-attack
|
|
|
9
22
|
```
|
|
10
23
|
|
|
11
24
|
You use:
|
|
12
|
-
If your app is an SPA you need to import only one time at first script
|
|
13
25
|
|
|
14
26
|
```javascript
|
|
15
|
-
import "react-attack"
|
|
27
|
+
import ReactAttack from "react-attack"
|
|
16
28
|
```
|
|
17
29
|
|
|
18
30
|
## how works and use
|
|
@@ -21,7 +33,7 @@ import "react-attack"
|
|
|
21
33
|
|
|
22
34
|
useEffect(
|
|
23
35
|
() => {
|
|
24
|
-
|
|
36
|
+
ReactAttack(
|
|
25
37
|
"body", // <-- Append to body
|
|
26
38
|
"component", // <-- ID of container
|
|
27
39
|
<div>HTML</div> // <-- Example with HTML
|
|
@@ -43,7 +55,7 @@ import "react-attack"
|
|
|
43
55
|
|
|
44
56
|
useEffect(
|
|
45
57
|
() => {
|
|
46
|
-
|
|
58
|
+
ReactAttack(
|
|
47
59
|
"body", // <-- Append to body
|
|
48
60
|
"component", // <-- ID of container
|
|
49
61
|
<TestComponent /> // <-- React Component
|
|
@@ -60,14 +72,14 @@ import "react-attack"
|
|
|
60
72
|
// Example in React to create a popup into body
|
|
61
73
|
|
|
62
74
|
import React from "react"
|
|
63
|
-
import
|
|
75
|
+
import ReactAttack from "react-attack"
|
|
64
76
|
|
|
65
77
|
const MyFunction = () =>{
|
|
66
78
|
|
|
67
79
|
useEffect(
|
|
68
80
|
() => {
|
|
69
81
|
|
|
70
|
-
|
|
82
|
+
ReactAttack(
|
|
71
83
|
"body",
|
|
72
84
|
"component",
|
|
73
85
|
<div
|
package/index.d.ts
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
https://dario.passariello.ca
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
declare module '
|
|
8
|
+
declare module 'ReactAttack'
|
|
9
9
|
|
|
10
|
-
declare var
|
|
11
|
-
type
|
|
10
|
+
declare var ReactAttack
|
|
11
|
+
type ReactAttack = {}
|
|
12
12
|
|
|
13
|
-
export default
|
|
13
|
+
export default ReactAttack
|
package/index.tsx
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import r,{isValidElement as i}from"react";import{createRoot as
|
|
1
|
+
import r,{isValidElement as i}from"react";import{createRoot as a}from"react-dom/client";const d=(c,o,e)=>{const t=document.createElement("div");t.id=o;const n=document.querySelector(c);if(!n)throw"React Glue need the parent object in the scene";const m=n.appendChild(t);a(t).render(i(e)?e:r.createElement(r.Fragment,null,e))};export default d;
|