diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 0dbbfb6..b59bfb4 100644 --- a/docs/astro.config.mjs +++ b/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/', + }, ], }, { diff --git a/docs/src/content/docs/start/installation.md b/docs/src/content/docs/start/installation.md index f825a31..fbd1667 100644 --- a/docs/src/content/docs/start/installation.md +++ b/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. diff --git a/docs/src/content/docs/start/third-party-scripts.mdx b/docs/src/content/docs/start/third-party-scripts.mdx new file mode 100644 index 0000000..6d867f7 --- /dev/null +++ b/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 ( +
Status: {status}
+