docs: third party scripts

docs/astro.config.mjs

@@ -28,6 +28,10 @@ export default defineConfig({
               label: 'Installation',
               link: '/start/installation/',
             },
+            {
+              label: 'Third Party Scripts',
+              link: '/start/third-party-scripts/',
+            },
           ],
         },
         {

docs/src/content/docs/start/installation.md

@@ -1,31 +1,48 @@
 ---
-title: Installation
+title: Getting Started with use-react-workers
 description: A quick glance at use react workers and what it offers
 ---
 
-Package is on [npm](https://www.npmjs.com/package/use-react-workers)
+The library is published and distributed via [NPM](https://www.npmjs.com/package/use-react-workers)
+
+Before you start, ensure you have the following prerequisites:
 
 :::tip[Prerequisites]
 
-- NodeJS version 14+
-- ReactJS version 16+
+- **Node.js**: You need to have Node.js version 14 or higher installed on your system. You can download it from the [official Node.js website](https://nodejs.org/en).
+
+- **React.js**: `use-react-workers` is a React library, so you need to have React.js version 16 or higher in your project.
+
   :::
 
+## Installation
+
+Choose your flavor of package manager and install as normal. A few examples:
+
+Yarn
+
 ```bash
-# Yarn
 yarn add use-react-workers
+```
 
-# Yarn
+pnpm
+
+```bash
 pnpm add use-react-workers
+```
 
-# npm
+npm
+
+```bash
 npm install use-react-workers
 ```
 
 ## Importing
 
-All hooks, functions, and types are named exports. They can be imported as such:
+`use-react-workers` provides several hooks, functions, and types as named exports. You can import them directly into your files like this:
 
-```tsx
+```ts
 import { useWorkerFunc } from 'use-react-workers';
 ```
+
+With `use-react-workers`, you can significantly enhance your application's performance by running heavy tasks in the background, without blocking the UI. It's a great tool to have in your React toolkit.

docs/src/content/docs/start/third-party-scripts.mdx

@@ -0,0 +1,57 @@
+---
+title: Using Third-Party Scripts
+description: A powerful library that allows you to run third party scripts in a separate thread using Web Workers
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+`use-react-workers` is a powerful library that allows you to run JavaScript code in a separate thread using Web Workers. One of the features of this library is the ability to use third-party scripts within the worker.
+
+## How to Use Third-Party Scripts
+
+To use a third-party script, you need to pass the URL of the script to the `remoteDependencies` option when you initialize the worker hook (useWorker, useWorkerFunc, etc..). The `remoteDependencies` option accepts an array of URLs.
+
+Here's an simple example using the `mathjs` library:
+
+```ts
+const [mathWorker, { status }] = useWorkerFunc(mathFunc, {
+  remoteDependencies: ['https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.4.0/math.min.js'],
+});
+```
+
+In this example, the mathjs library is loaded into the worker's context and can be used anywhere within the `mathFunc`
+
+:::note
+
+- The functions from the third-party scripts are not automatically imported into the global scope. They are part of the exported object of the library. For example, if you're using `mathjs`, you need to call the functions as `self.math.floor` instead of just `floor`.
+- The scripts must be compatible with Web Workers. Not all JavaScript libraries can be used in a Web Worker. Some libraries rely on APIs that are not available in workers, such as the DOM API.
+
+:::
+
+### Example
+
+Here's an example of how you can use a third-party script in a worker:
+
+```ts
+import { useWorkerFunc } from 'use-react-workers';
+
+function myFunction(n) {
+  return self.math.floor(n);
+}
+
+function MyComponent() {
+  const [myWorker, { status }] = useWorkerFunc(myFunction, {
+    remoteDependencies: ['https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.4.0/math.min.js'],
+  });
+
+  return (
+    <div>
+      <button onClick={() => myWorker(2.6)}>Calculate</button>
+      <p>Status: {status}</p>
+    </div>
+  );
+}
+```
+
+Ca
+In this example, the `myFunction` function uses the floor function from the `mathjs` library. The `mathjs` library is loaded into the worker's context using the `remoteDependencies` option.