open-index/open-npm huggingface dataset:
npm package: @prachyot/nestjs-healthcheck
Description: A NestJS module to provide healthcheck endpoints for your application.
Author: Prach Yothaprasert
Latest version: 0.0.3

# Healtcheck Module

A NestJS module to provide healthcheck endpoints for your application.

Implementation purpose

1. Reduce project setup time
2. Reduce project onboarding time
3. Help lean your base project

## Installation

```sh
yarn add @prachyot/nestjs-healthcheck
```

## Usage

```ts
import { HealthcheckModule } from '@prachyot/nestjs-healthcheck';
...

@Module({
  imports: [
    HealthcheckModule
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
```

## Endpoints

```postman
http://localhost:3000/<api-prefix>/healthcheck
```
npm package: @prachyot/nestjs-s3
Description: A NestJS module to provide a S3 client and a S3 service for your application.
Author: Prach Yothaprasert
Latest version: 0.0.11

# S3 Module

A NestJS module to provide a S3 client and a S3 service for your application.

Implementation purpose

1. Reduce project setup time
2. Reduce project onboarding time
3. Help lean your base project

## Installation

```sh
yarn add @prachyot/nestjs-s3
```

## Usage

Add these new variable to your `.env` file

```sh
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
```

Import the module in your AppModule

```ts
import { S3Module } from '@prachyot/nestjs-s3';
...

@Module({
  imports: [
    S3Module
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
```

You can change the default configuration by passing an object to the forRoot method

```ts
import { S3Module } from '@prachyot/nestjs-s3';
...

@Module({
  imports: [
    S3Module.forRoot({
      envFilePath: '.env.local' // Change the path to your env file
    })
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
```

Or you can use `forRootAsync` method to pass a factory function

```ts
import { S3Module } from '@prachyot/nestjs-s3';
...

@Module({
  imports: [
    S3Module.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: (configService: ConfigService) => {
        return {
          envFilePath: configService.get('ENV_FILE_PATH'),
        }
      }
    })
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
```

## Service method specification

```ts
// Method: s3
// Description: Returns an instance of the S3 client

this.s3Service.s3();
```

```ts
/*
 * Method: uploadFile
 * Description: Uploads a file to S3
 *
 * @Params:
 * bucketName: string
 * dir: string
 * fileName: string
 * cacheAge: number (optional) (default: 31536000) (1 year)
 */

await this.uploadFile('my-bucket', 'src/assets', 'my-file.png');
```
npm package: @practal/flyweight
Description: Flyweight implementation of abstraction logic.
Author: Steven Obua
Latest version: 0.0.10

# Practal Flyweight

Flyweight implementation of abstraction logic in TypeScript 
for experimenting with abstraction logic in practice.

Pointers for the [accompanying paper](https://doi.org/10.5281/zenodo.15119824) (you can run each example,
for example `npm run Example-2`):

* Example-2: [src/theories/Example-2.theory.ts](src/theories/Example-2.theory.ts)
* Example-8: [src/theories/Example-8.theory.ts](src/theories/Example-8.theory.ts)
* Implication: [src/theories/Implication.theory.ts](src/theories/Implication.theory.ts)
* Minimal-Logic: [src/theories/Minimal-Logic.theory.ts](src/theories/Minimal-Logic.theory.ts)
* Intuitionistic-Predicate-Logic: [src/theories/Intuitionistic-Predicate-Logic.theory.ts](src/theories/Intuitionistic-Predicate-Logic.theory.ts)
* Classical-Predicate-Logic: [src/theories/Classical-Predicate-Logic.theory.ts](src/theories/Classical-Predicate-Logic.theory.ts)
* Lambda-Calculus: [src/theories/Lambda-Calculus.theory.ts](src/theories/Lambda-Calculus.theory.ts)
* Peano: [src/theories/Peano.theory.ts](src/theories/Peano.theory.ts)
* Peano-Recursion: [src/theories/Peano-Recursion.theory.ts](src/theories/Peano-Recursion.theory.ts)
npm package: @practera/jwt-parser
Description: Verifies using public keys and parses a JWT
Latest version: 1.0.8

# @practera/jwt-parser

Validates a JWT with a public key, parses the token and returns the contents.

## Install

```
$ npm install @practera/jwt-parser
```

## Usage

### Notes
`exp` object must present in JWT payload when `CHECK_JWT_EXPIRY` is enabled (by setting 'true' in string)

### Parameters

`CHECK_JWT_EXPIRY` - will invalidate a JWT when the expiry timestamp (in seconds) isn't provided.

### How to use?

JavaScript:
```js
const jwtParse = require("@practera/jwt-parser");

jwtContents = jwtParse(
  token, // the token to be verified and parsed
  process.env, // environmental variables or another array of tokens that are accepted
  service, // this will identify what public key to use to validate the token, the variable called ${service}_JWT will be used. The variable should contain a key called public and the public key as the value.
  ['RS256'], // list of algorithms that will be used to validate the token. Default: ['RS256']
);
```

TypeScript:
```js
import jwtParse from "@practera/jwt-parser";

jwtContents = jwtParse(
  token, // the token to be verified and parsed
  process.env, // environmental variables or another array of tokens that are accepted
  service, // this will identify what public key to use to validate the token, the variable called ${service}_JWT will be used. The variable should contain a key called public and the public key as the value.
  ['RS256'], // list of algorithms that will be used to validate the token. Default: ['RS256']
);
```
npm package: @practera/messaging-sdk
Description: Facilitates the communication with the Practera messaging API
Latest version: 0.0.4

# @practera/messaging-sdk

Facilitates the communication with the Practera messaging API.

## Health

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=intersective_messaging-sdk&metric=alert_status&token=19814e72d32dd8ab193bb168320116a41f84beb3)](https://sonarcloud.io/dashboard?id=intersective_messaging-sdk)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=intersective_messaging-sdk&metric=coverage&token=19814e72d32dd8ab193bb168320116a41f84beb3)](https://sonarcloud.io/dashboard?id=intersective_messaging-sdk)
[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=intersective_messaging-sdk&metric=security_rating&token=19814e72d32dd8ab193bb168320116a41f84beb3)](https://sonarcloud.io/dashboard?id=intersective_messaging-sdk)
[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=intersective_messaging-sdk&metric=sqale_rating&token=19814e72d32dd8ab193bb168320116a41f84beb3)](https://sonarcloud.io/dashboard?id=intersective_messaging-sdk)
[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=intersective_messaging-sdk&metric=bugs&token=19814e72d32dd8ab193bb168320116a41f84beb3)](https://sonarcloud.io/dashboard?id=intersective_messaging-sdk)
[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=intersective_messaging-sdk&metric=code_smells&token=19814e72d32dd8ab193bb168320116a41f84beb3)](https://sonarcloud.io/dashboard?id=intersective_messaging-sdk)


## Install

```
$ npm install @practera/messaging-sdk
```

## Usage

### setting up the client
JavaScript:
```js
const Messages = require("@practera/messaging-sdk");
```

TypeScript:
```js
import { Messages } from "@practera/messaging-sdk";
```

Sending a json to the messaging service

```js
const client = new Messages.create(
  privateKey, // the private key used to sign the request
  service, // this will identify what public key to use to validate the token, the variable called ${service}_JWT will be used. The variable should contain a key called public and the public key as the value.
  url, // the URL of the messaging API, leave empty for production
);

// to perform the api call for the data
client.send({message: 'Hello world !!!'});

// a singleton has been created so after creating the initial client you can also call it using
Messages.instance.send({wow: "blah"});
```
npm package: @practera/template-transform
Description: Transforms an experience template between different versions
Latest version: 0.0.2

# @practera/template-transform

Facilitates the communication with the Practera preferences API.

## Health

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=intersective_template-transform&metric=alert_status)](https://sonarcloud.io/dashboard?id=intersective_template-transform)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=intersective_template-transform&metric=coverage)](https://sonarcloud.io/dashboard?id=intersective_template-transform)
[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=intersective_template-transform&metric=security_rating)](https://sonarcloud.io/dashboard?id=intersective_template-transform)
[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=intersective_template-transform&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=intersective_template-transform)
[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=intersective_template-transform&metric=bugs)](https://sonarcloud.io/dashboard?id=intersective_template-transform)
[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=intersective_template-transform&metric=code_smells)](https://sonarcloud.io/dashboard?id=intersective_template-transform)


## Install

```
$ npm install @practera/template-transform
```

## Usage

### setting up the client
JavaScript:
```js
const transform = require("@practera/template-transform");
```

TypeScript:
```js
import { transform } from "@practera/template-transform";
```

### Transforming a template

```js
const result = transform(
  VersionFrom, // string, the version the template is in
  VersionTo, // string, the desired version
  data // {} the json data
);
```
npm package: @practical-angular/local-storage
Description: LocalStorage support for Angular.
Author: sengokyu
Latest version: 15.2.11-rc.1

# @practical-angular/local-storage

LocalStorage support for Angular.

## Usage

Import LocalStorageModule to a module.

```diff
+ import { LocalStorageModule } from '@practical-angular/local-storage';

  @NgModule({
-   imports: [BrowserModule],
+   imports: [BrowserModule, LocalStorageModule],
  })
```

Inject the service to a component.

```diff
+ import { LocalStorageService } from '@practical-angular/local-storage';

  export class YourComponent {
-   constructor() {}
+   constructor(private localStorageService: LocalStorageService) {}
  }
```

Call Set / Get / Remove Clear method.

```ts
// Set item.
this.localStorageService.setItem(key, value);

// Get item
const value = this.localStorageService.getItem(key);

// Remove item
this.localStorageService.removeItem(key);

// Clear storage
this.localStorageService.clear();
```
npm package: @practical-fp/pipes
Description: A Typescript library for piping values through functions.
Author: Felix Schorer
Latest version: 1.1.1

# `@practical-fp/pipes`
A Typescript library for piping values through functions.

## Installation
```bash
$ npm install @practical-fp/pipes
```
[![NPM](https://nodei.co/npm/@practical-fp/pipes.png)](https://npmjs.org/package/@practical-fp/pipes)

## Examples
```typescript
import {pipe} from "@practical-fp/pipes"

const result = pipe(
    5,
    number => number * 5,
    number => number.toFixed(),
    number => `The result is ${number}`,
    result => result.toUpperCase(),
)
```

```typescript
import {asyncPipe} from "@practical-fp/pipes"

const title = await asyncPipe(
    "https://jsonplaceholder.typicode.com/todos/1",
    url => fetch(url),
    response => response.json(),
    json => json.title,
)
```

```typescript
import {pipeR} from "@practical-fp/pipes"

const result = pipeR(
    (result: string) => result.toUpperCase(),
    (number: string) => `The result is ${number}`,
    (number: number) => number.toFixed(),
    (number: number) => number * 5,
    5,
)
```

```typescript
import {asyncPipeR} from "@practical-fp/pipes"

const title = await asyncPipeR(
    (json: any) => json.title,
    (response: Response) => response.json(),
    (url: string) => fetch(url),
    "https://jsonplaceholder.typicode.com/todos/1",
)
```
npm package: @practical-js/sanity-hierarchical-docs
Description: Sanity Plugin - Hierarchical Document List
Author: Practical AT
Latest version: 1.2.5

# sanity-plugin-hierarchical-document-list

> This is a **Sanity Studio v3** plugin.


Plugin for visually organizing documents as hierarchies in the [Sanity studio](https://www.sanity.io/docs/sanity-studio). Applications include:

- Tables of content - such as a book's sections and chapters
- Navigational structure & menus - a website mega-menu with multiple levels, for example
- Taxonomy inheritance - "_Carbs_ is a parent of _Legumes_ which is a parent of _Beans_"

![Screenshot of the plugin](https://raw.githubusercontent.com/sanity-io/hierarchical-document-list/HEAD/screenshot-1.jpg)

**Compatibility:** This plugin requires Sanity Studio [version 3]
## Getting started

```bash
# From the root of your sanity project
npm install @practical-js/sanity-hierarchical-docs
```

Once you've installed the plugin the next step is to add one or more hierarchy documents to your Structure Builder.

💡 _To learn about custom desk structures, refer to the [Structure Builder docs](https://www.sanity.io/docs/overview-structure-builder)._

```js
// deskStructure.js
import {createDeskHierarchy} from '@practical-js/sanity-hierarchical-docs'

export default (S, context) => {
  return S.list()
    .title('Content')
    .items([
      ...S.documentTypeListItems(), // or whatever other structure you have
      createDeskHierarchy({
        S,
        context,
        title: 'Main table of contents',

        // The hierarchy will be stored in this document ID 👇
        documentId: 'main-table-of-contents',

        // Document types editors should be able to include in the hierarchy
        referenceTo: ['site.page', 'site.post', 'docs.article', 'social.youtubeVideo'],

        // ❓ Optional: provide filters and/or parameters for narrowing which documents can be added
        referenceOptions: {
          filter: 'status in $acceptedStatuses',
          filterParams: {
            acceptedStatuses: ['published', 'approved']
          }
        },

        // ❓ Optional: limit the depth of your hierarachies
        // maxDept: 3
      })
    ])
}
```
## License

[MIT](LICENSE) ©practical-AT - www.practical.at
npm package: @practical-react-hooks/use-axios
Description: React Hook to make HTTP requests with allowing to set configurations and customizations
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-axios

React Hook to make HTTP requests with allowing to set configurations and customizations

## Installation

yarn  
```
yarn add @practical-react-hooks/use-axios
```
  
npm
```  
npm i @practical-react-hooks/use-axios
```

## Usage
  
```
import React from "react";
import useAxios from "@practical-react-hooks/use-axios";

const App = () => {
  return (
    const { loading, error, data, refetch } = useAxios({
      url: "API url"
    })
    <div className="App">
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|options|objects|Object to make HTTP requests|yes|
|axiosInstance|objects|To set configurations and customizations of axios|no|

## Return
  
|Return value|Type|Description|
|:---:|:---:|:---:|
|loading|boolean|When loading is finished return flase or not true|
|error|string|Let know error message|
|data|objects|Object from API request|
|refetch|Function|Function to make reloading|
npm package: @practical-react-hooks/use-before-leave
Description: React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.
Author: leebonghak
Latest version: 1.0.2

# @practical-react-hooks/use-before-leave

React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-before-leave
```
  
npm
```  
npm i @practical-react-hooks/use-before-leave
```

## Usage
  
```
import React from "react";
import useBeforeLeave from "@practical-react-hooks/use-before-leave";

const App = () => {
  const beforeLeave = () => console.log("User is leaving...");
  useBeforeLeave(beforeLeave);
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|onBeforeLeave|function|Function to be called when the mouse leaves the document|yes|
npm package: @practical-react-hooks/use-click
Description: React Hook to detect and execute the function when someone click the element.
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-click

React Hook to detect and execute the function when someone click the element.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-click
```
  
npm
```  
npm i @practical-react-hooks/use-click
```

## Usage
  
```
import React from "react";
import useClick from "@practical-react-hooks/use-click";

const App = () => {
  const sayHello = () => console.log("Hello World!");
  const trigger = useClick(sayHello)
  return (
    <div className="App">
      <h1 ref={trigger}>Hello</h1>
    </div>
  );
};
```

## Arguments  
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|onClick|function|The function to execute when click element|yes|
npm package: @practical-react-hooks/use-confirm
Description: React Hook to ask the user for a confirmation before executing a function.
Author: leebonghak
Latest version: 1.0.2

# @practical-react-hooks/use-confirm

React Hook to ask the user for a confirmation before executing a function.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-confirm
```
  
npm
```  
npm i @practical-react-hooks/use-confirm
```

## Usage
  
```
import React from "react";
import useConfirm from "@practical-react-hooks/use-confirm";

const App = () => {
  const deleteWorld = () => console.log("Deleting world...");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld);
  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  );
};
```

## Arguments  
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|message|string|Message to show the user on the confirmationpropmt|yes|
|onConfirm|function|Function to be executed when the user confirms|yes|
|onCancel|function|Function to be executed when the user cancels|no|

## Return
  
|Return value|Type|Description|Default value|
|:---:|:---:|:---:|:---:|
|function|function|Function wrapped around the confirmation logic|null|
npm package: @practical-react-hooks/use-fade-in
Description: React Hook to fade in any element.
Author: leebonghak
Latest version: 1.0.1

# @practical-react-hooks/use-fade-in

React Hook to fade in any element.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-fade-in
```
  
npm
```  
npm i @practical-react-hooks/use-fade-in
```

## Usage
  
```
import React from "react";
import useFadeIn from "@practical-react-hooks/use-fade-in";

const App = () => {
  const fadeIn = useFadeIn(5, 10);
  return (
    <div className="App">
      <h1 {...fadeIn}>Hello World</h1>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Required|Default value|
|:---:|:---:|:---:|:---:|:---:|
|duration|number|Sets the duration of the transition. In seconds|no|1|
|delay|number|Delays of transition's start. In seconds|no|0|

## Return
  
|Name|Type|Description|
|:---:|:---:|:---:|
|ref|React Ref|A ref created to fadeIn the element|
|style|Object|Style object containing {opacity:0} to give to the element as a default|
npm package: @practical-react-hooks/use-fade-out
Description: React Hook to fade out any element.
Author: leebonghak
Latest version: 1.0.2

# @practical-react-hooks/use-fade-out

React Hook to fade out any element.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-fade-out
```
  
npm
```  
npm i @practical-react-hooks/use-fade-out
```

## Usage
  
```
import React from "react";
import useFadeOut from "@practical-react-hooks/use-fade-out";

const App = () => {
  const fadeOut = useFadeOut(5, 10);
  return (
    <div className="App">
      <h1 {...fadeOut}>Hello World</h1>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Required|Default value|
|:---:|:---:|:---:|:---:|:---:|
|duration|number|Sets the duration of the transition. In seconds|no|1|
|delay|number|Delays of transition's start. In seconds|no|0|
  
## Return
  
|Name|Type|Description|
|:---:|:---:|:---:|
|ref|React Ref|A ref created to fadeIn the element|
|style|Object|Style object containing {opacity:1} to give to the element as a default|
npm package: @practical-react-hooks/use-fullscreen
Description: React Hook to make any element go Fullscreen
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-fullscreen

React Hook to make any element go Fullscreen

## Installation

yarn  
```
yarn add @practical-react-hooks/use-fullscreen
```
  
npm
```  
npm i @practical-react-hooks/use-fullscreen
```

## Usage
  
```
import React from "react";
import useFullscreen from "@practical-react-hooks/use-fullscreen";

const App = () => {
  const onChange = isFull => console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div className="App" ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Arguments|Required|
|:---:|:---:|:---:|:---:|:---:|
|onChange|function|Function to be called when the screen goes Fullscreen or exits is|isFull : Boolean|no|

## Return
  
|Return value|Type|Description|
|:---:|:---:|:---:|
|element|React Ref|Ref to add to the element that you want to make fullscreen|
|triggerFull|Function|Function to make the element enter fullscreen|
|exitFull|Function|Function to make the document exit fullscreen|
npm package: @practical-react-hooks/use-hover
Description: React Hook to detect and execute the function when mouse hover the element.
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-hover

React Hook to detect and execute the function when mouse hover the element.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-hover
```
  
npm
```  
npm i @practical-react-hooks/use-hover
```

## Usage
  
```
import React from "react";
import useHover from "@practical-react-hooks/use-hover";

const App = () => {
  const sayHello = () => console.log("Hello World!");
  const trigger = useHover(sayHello)
  return (
    <div className="App">
      <h1 ref={trigger}>Hello</h1>
    </div>
  );
};
```

## Arguments  
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|onClick|function|The function to execute when click element|yes|
npm package: @practical-react-hooks/use-input
Description: React Hook to update your document's input
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-input

React Hook to update your document's input.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-input
```
  
npm
```  
npm i @practical-react-hooks/use-input
```

## Usage
  
```
import React from "react";
import useInput from "@practical-react-hooks/use-input";

const App = () => {
  const validator = value => value.length < 30;
  const name = useInput("Mr./Ms.", validator);
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};
```

## Arguments  
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|initialValue|string|initial Value you want to use on input|no|
|validator|function|The function you want to valid input value and The function that return boolean|no|
npm package: @practical-react-hooks/use-network
Description: React Hook to listen when the user goes online or offline.
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-network

React Hook to listen when the user goes online or offline.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-network
```
  
npm
```  
npm i @practical-react-hooks/use-network
```

## Usage
  
```
import React from "react";
import useNetwork from "@practical-react-hooks/use-network";

const App = () => {
  const onNetworkChange = isOnline => console.log(isOnline ? "We are back online" : "We just got offline");
  const isOnline = useNetwork(onNetworkChange);
  return (
    <div className="App">
      <h1>{isOnline ? "We are online" : "We are offline"}</h1>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Arguments|Required|
|:---:|:---:|:---:|:---:|:---:|
|onNetworkChange|function|Function to be called when the network status changes|isOnline : Boolean|no

## Return
  
|Return value|Type|Description|Default value|
|:---:|:---:|:---:|:---:|
|isOnline|Boolean|A boolean representing if the user is online or not|true|
npm package: @practical-react-hooks/use-notification
Description: React Hook to make web browser notification to user
Author: leebonghsk
Latest version: 1.0.1

# @practical-react-hooks/use-notification

React Hook to make web browser notification to user

## Installation

yarn  
```
yarn add @practical-react-hooks/use-notification
```
  
npm
```  
npm i @practical-react-hooks/use-notification
```

## Usage
  
```
import React from "react";
import useNotification from "@practical-react-hooks/use-notification";

const App = () => {
  const triggerNotif = useNotification("Can you love me?", {body: "I love you"});
  return (
    <div className="App">
      <button onClick={triggerNotif}>Hello</button>
    </div>
  );
};
```

## Arguments
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|title|string|Notification title|yes|
|options|objects|Notification options in notification API (https://developer.mozilla.org/en-US/docs/Web/API/notification)|no|

## Return
  
|Return value|Type|Description|
|:---:|:---:|:---:|
|fireNotif|Function|Function to make Notification|
npm package: @practical-react-hooks/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Author: leebonghak
Latest version: 1.0.0

# @practical-react-hooks/use-prevent-leave

React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-prevent-leave
```
  
npm
```  
npm i @practical-react-hooks/use-prevent-leave
```

## Usage
  
```
import React from "react";
import usePreventLeave from "@practical-react-hooks/use-prevent-leave";

const App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  const saveChanges = async () => {
    enablePrevent();
    await sendToApi();
    disablePrevent();
  };
  return (
    <div className="App">
      <button onClick={saveChanges}>Save changes</button>
    </div>
  );
};
```

## Return
  
|Return value|Type|Description|
|:---:|:---:|:---:|
|Functions|Object|A object containing functions enablePrevent and disablePrevent, use this functions to enable/disable the leaving prevention|
npm package: @practical-react-hooks/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll.
Author: leebonghsk
Latest version: 1.0.0

# @practical-react-hooks/use-scroll

React Hook to get X/Y coordinates of current position of the scroll.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-scroll
```
  
npm
```  
npm i @practical-react-hooks/use-scroll
```

## Usage
  
```
import React from "react";
import useScroll from "@practical-react-hooks/use-scroll";

const App = () => {
  const { x, y } = useScroll();
  return (
    <div className="App">
      <h1>We are in: {x} / {y}</h1>
    </div>
  );
};
```

## Return
  
|Return value|Type|Description|Default value|
|:---:|:---:|:---:|:---:|
|Coords|Object|An object containing the x/y coordinates of the current scroll position|{x:0, y:0}|
npm package: @practical-react-hooks/use-tabs
Description: React Hook to use content easily in array of objects inside.
Author: leebonghak
Latest version: 1.0.1

# @practical-react-hooks/use-tabs

React Hook to use content easily in array of objects inside.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-tabs  
```
  
npm
```  
npm i @practical-react-hooks/use-tabs
```

## Usage
  
```
import React from "react";
import useTabs from "@practical-react-hooks/use-tabs";

const content = [
  {
    tab: "Section 1",
    content: "This is the content of the Section 1"
  },
  {
    tab: "Section 2",
    content: "This is the content of the Section 2"
  },
  ...
];

function App() {
  const { currentItem, changeItem } = useTabs(0, content);
  return (
    <div>
      {content.map((section, index) => (<button onClick={() => changeItem(index)}>{section.tab}</button>))}
      <h1>{currentItem.content}</h1>
    </div>
  );
}
```

## Arguments  
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|initialTab|number|The index you want to start in array|yes|
|allTabs|array|The array you want to use on your document|yes|
npm package: @practical-react-hooks/use-title
Description: React Hook to update your document's title
Author: leebonghak
Latest version: 1.0.2

# @practical-react-hooks/use-title

React Hook to update your document's title.

## Installation

yarn  
```
yarn add @practical-react-hooks/use-title  
```
  
npm
```  
npm i @practical-react-hooks/use-title  
```

## Usage
  
```
import React from "react";
import useTitle from "@practical-react-hooks/use-title";

function App() {
  useTitle("Welcome");
  return <h1>Welcome</h1>;
}
```

## Arguments  
  
|Argument|Type|Description|Required|
|:---:|:---:|:---:|:---:|
|title|string|The title you want to use on your document|yes|
npm package: @practical/verdaccio-api-token
Description: Simple API token auth for Verdaccio
Author: Amar Tupo
Latest version: 1.0.3

# verdaccio-api-token

[![npm version](https://img.shields.io/npm/v/@practical/verdaccio-api-token.svg)](https://www.npmjs.com/package/@practical/verdaccio-api-token)

Minimal Verdaccio Auth Plugin that validates non JWT `_authToken` against an external API endpoint.
⚠️ **not htpasswd compatible **: as we override `apiJWTmiddleware` you can not npm login/adduser
to publish tokens u will need an authtoken with according rights. 
however if you initially set up via `npm adduser` and add your token u can still login to the web UI.

## Features

- ✅ Only 2 config options: `endpoint`, `timeout`
- ✅ Native `fetch()` (Node.js 18+)
- ✅ Timeout & Error Handling
- ✅ **JWT Support**: Web UI login works unchanged if you have added users via npm adduser
- ✅ Allowed groups dynamically from API response


## Setup

```bash
# Install the plugin either globally or in your plugins folder
npm i @practical/verdaccio-api-token

```

## config.yaml
```yaml


# verdaccio will look for the plugin globally in your node_modules folder
# for local installation you can specify the plugins folder
plugins: ./plugins/node_modules # optional



auth:
  '@practical/verdaccio-api-token':
    endpoint: https://your-api.com/verdaccio/verify  # Required 
    timeout: 5000  # Optional (ms)
    signupUrl: your signup page  # Optional 

# set your auth config as u like
packages:
  'yourPrivatePackage':
    access: $authenticated
    publish: admin developer #example users create your own
    unpublish: admin
```

in the projects' `.npmrc` file add the token 

``
//registry.your-domain.com/:_authToken=YOUR_API_TOKEN
``

API Endpoint Format
Your validation endpoint must support this request/response format:

Request:

```json
{
  "token": "your-custom-token-here"
}
```

Response (Valid Token):

```json
{
  "groups": ["developers", "users"]
}
```

API Response should return groups that you defined or an empty array
find out more about package access https://www.verdaccio.org/docs/packages

```
// ✅ Success
{ "groups": ["$authenticated"] }

// ❌ Fails
{ "groups": [] }
```