✨ Add id param to useScript hook (from #285 by @misidoro) (#525)

* ✨ Add `id` param to `useScript` hook (from #285 by @misidoro) * Fix missing useEffect dependency
juliencrn · Mar 5, 2024 · 9b65ce8 · 9b65ce8
1 parent 0d99db9
commit 9b65ce8
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 3 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1684,8 +1684,16 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/54762253?v=4",
       "profile": "https://github.com/kyrylo-soulandwolf",
       "contributions": ["code", "bug"]
+    },
+    {
+      "login": "misidoro",
+      "name": "Miguel Isidoro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3635023?v=4",
+      "profile": "https://github.com/misidoro",
+      "contributions": ["code"]
     }
   ],
   "contributorsPerLine": 7,
   "commitType": "docs"
 }
+
diff --git a/.changeset/long-suits-repair.md b/.changeset/long-suits-repair.md
@@ -0,0 +1,5 @@
+---
+"usehooks-ts": minor
+---
+
+Add `id` param to `useScript` hook (from #285 by @misidoro)
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -413,6 +413,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kyrylo-soulandwolf"><img src="https://avatars.githubusercontent.com/u/54762253?v=4?s=64" width="64px;" alt="kyrylo-soulandwolf"/><br /><sub><b>kyrylo-soulandwolf</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=kyrylo-soulandwolf" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Akyrylo-soulandwolf" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/misidoro"><img src="https://avatars.githubusercontent.com/u/3635023?v=4?s=64" width="64px;" alt="Miguel Isidoro"/><br /><sub><b>Miguel Isidoro</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=misidoro" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-239-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-240-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -427,6 +427,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kyrylo-soulandwolf"><img src="https://avatars.githubusercontent.com/u/54762253?v=4?s=64" width="64px;" alt="kyrylo-soulandwolf"/><br /><sub><b>kyrylo-soulandwolf</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=kyrylo-soulandwolf" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Akyrylo-soulandwolf" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/misidoro"><img src="https://avatars.githubusercontent.com/u/3635023?v=4?s=64" width="64px;" alt="Miguel Isidoro"/><br /><sub><b>Miguel Isidoro</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=misidoro" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/packages/usehooks-ts/README.md b/packages/usehooks-ts/README.md
@@ -17,7 +17,7 @@
 [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-239-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-240-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -427,6 +427,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kyrylo-soulandwolf"><img src="https://avatars.githubusercontent.com/u/54762253?v=4?s=64" width="64px;" alt="kyrylo-soulandwolf"/><br /><sub><b>kyrylo-soulandwolf</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=kyrylo-soulandwolf" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Akyrylo-soulandwolf" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/misidoro"><img src="https://avatars.githubusercontent.com/u/3635023?v=4?s=64" width="64px;" alt="Miguel Isidoro"/><br /><sub><b>Miguel Isidoro</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=misidoro" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/packages/usehooks-ts/src/useScript/useScript.demo.tsx b/packages/usehooks-ts/src/useScript/useScript.demo.tsx
@@ -10,6 +10,7 @@ export default function Component() {
   // Load the script asynchronously
   const status = useScript(`https://code.jquery.com/jquery-3.5.1.min.js`, {
     removeOnUnmount: false,
+    id: 'jquery',
   })
 
   useEffect(() => {

diff --git a/packages/usehooks-ts/src/useScript/useScript.test.ts b/packages/usehooks-ts/src/useScript/useScript.test.ts
@@ -61,4 +61,23 @@ describe('useScript', () => {
 
     expect(result2.current).toBe('ready')
   })
+
+  it('should have a `id` attribute when given', () => {
+    const src = '/'
+    const id = 'my-script'
+
+    const { result } = renderHook(() => useScript(src, { id }))
+
+    // Make sure the document is loaded
+    act(() => {
+      document
+        .querySelector(`script[src="${src}"]`)
+        ?.dispatchEvent(new Event('load'))
+    })
+
+    expect(result.current).toBe('ready')
+
+    expect(document.querySelector(`script[id="${id}"]`)).not.toBeNull()
+    expect(document.querySelector(`script[src="${src}"]`)?.id).toBe(id)
+  })
 })
diff --git a/packages/usehooks-ts/src/useScript/useScript.ts b/packages/usehooks-ts/src/useScript/useScript.ts
@@ -4,6 +4,8 @@ export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error'
 export interface UseScriptOptions {
   shouldPreventLoad?: boolean
   removeOnUnmount?: boolean
+  /** Script's `id` (optional) */
+  id?: string
 }
 
 // Cached script statuses
@@ -79,6 +81,9 @@ export function useScript(
       scriptNode = document.createElement('script')
       scriptNode.src = src
       scriptNode.async = true
+      if (options?.id) {
+        scriptNode.id = options.id
+      }
       scriptNode.setAttribute('data-status', 'loading')
       document.body.appendChild(scriptNode)
 
@@ -123,7 +128,7 @@ export function useScript(
         cachedScriptStatuses.delete(src)
       }
     }
-  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount])
+  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount, options?.id])
 
   return status
 }