1- # react-use-script
1+ # react-use-scripts
22
3- > Appends script tags to the document with ease
3+ > Appends script tags to the document as functions or components with ease
44
5- [ ![ NPM] ( https://img.shields.io/npm/v/react-use-script .svg )] ( https://www.npmjs.com/package/react-use-script )
5+ [ ![ NPM] ( https://img.shields.io/npm/v/react-use-scripts .svg )] ( https://www.npmjs.com/package/react-use-scripts )
66
77---
88
1818## Install
1919
2020``` bash
21- npm install --save react-use-script
21+ npm install --save react-use-scripts
2222```
2323
2424---
@@ -29,7 +29,7 @@ npm install --save react-use-script
2929
3030``` tsx
3131import * as React from ' react' ;
32- import { useScript } from ' react-use-script ' ;
32+ import { useScript } from ' react-use-scripts ' ;
3333
3434const App = () => {
3535 const { ScriptLoader } = useScript ();
@@ -52,7 +52,7 @@ const App = () => {
5252
5353``` tsx
5454import * as React from ' react' ;
55- import { useScript } from ' react-use-script ' ;
55+ import { useScript } from ' react-use-scripts ' ;
5656
5757const App = () => {
5858 const { appendScript } = useScript ();
@@ -77,67 +77,65 @@ const App = () => {
7777
7878## Documentation
7979
80- ` useScript() ` returns:
81-
82- 1 . <ScriptLoader />
83-
84- - Props
85-
86- ``` tsx
87- type ScriptLoader = {
88- onCreate? : (() => null ) | undefined ; // runs after script tag rendering
89- onLoad? : (() => null ) | undefined ; // runs on script load
90- onError? : ((e : any ) => never ) | undefined ; // runs on script error
91- delayMs? : number | undefined ; // run with delayed start
92- htmlPart? : string | undefined ; // choose where to append, HEAD or BODY
93- src: string ; // script file source path
94- otherProps? : Record <string , unknown > | undefined ; // html script tag properties
95- };
96- ```
97-
98- - Default Props
99-
100- ``` tsx
101- src : undefined ;
102- onCreate = () => null ;
103- onLoad = () => null ;
104- onError = (e ) => {
105- throw new URIError (` The script ${e .target .src } is not accessible ` );
106- };
107- delayMs = 0 ;
108- htmlPart = ' head' ;
109- otherProps : undefined ;
110- ```
111-
112- 2 . appendScript()
113-
114- - Props
115-
116- ``` tsx
117- type AppendScript = {
118- id: string ; // script id
119- scriptText: string ; // script code as string
120- optionalCallback? : (() => null ) | undefined ; // optional callback function after running
121- htmlPart: string ; // choose where to append, HEAD or BODY
122- otherProps? : Record <string , unknown > | undefined ; // html script tag properties
123- };
124- ```
125-
126- - Default Props
127-
128- ``` tsx
129- id : undefined ;
130- scriptText : undefined ;
131- optionalCallback = () => null ;
132- htmlPart = ' head' ;
133- otherProps = {};
134- ```
80+ - ` useScript() ` returns:
81+
82+ - ScriptLoader as component
83+ - Props:
84+
85+ ``` tsx
86+ type ScriptLoader = {
87+ onCreate? : (() => null ) | undefined ; // runs after script tag rendering
88+ onLoad? : (() => null ) | undefined ; // runs on script load
89+ onError? : ((e : any ) => never ) | undefined ; // runs on script error
90+ delayMs? : number | undefined ; // run with delayed start
91+ htmlPart? : string | undefined ; // choose where to append, HEAD or BODY
92+ src: string ; // script file source path
93+ otherProps? : Record <string , unknown > | undefined ; // html script tag properties
94+ };
95+ ```
96+
97+ - Default Props:
98+
99+ ``` tsx
100+ src : undefined ;
101+ onCreate = () => null ;
102+ onLoad = () => null ;
103+ onError = (e ) => {
104+ throw new URIError (` The script ${e .target .src } is not accessible ` );
105+ };
106+ delayMs = 0 ;
107+ htmlPart = ' head' ;
108+ otherProps : undefined ;
109+ ```
110+
111+ - appendScript()
112+ - Props:
113+
114+ ``` tsx
115+ type AppendScript = {
116+ id: string ; // script id
117+ scriptText: string ; // script code as string
118+ optionalCallback? : (() => null ) | undefined ; // optional callback function after running
119+ htmlPart: string ; // choose where to append, HEAD or BODY
120+ otherProps? : Record <string , unknown > | undefined ; // html script tag properties
121+ };
122+ ```
123+
124+ - Default Props:
125+
126+ ``` tsx
127+ id : undefined ;
128+ scriptText : undefined ;
129+ optionalCallback = () => null ;
130+ htmlPart = ' head' ;
131+ otherProps = {};
132+ ```
135133
136134---
137135
138136## License
139137
140- react-use-script is [ MIT licensed] ( ./LICENSE ) .
138+ react-use-scripts is [ MIT licensed] ( ./LICENSE ) .
141139
142140---
143141
0 commit comments