open-index/open-npm huggingface dataset:
npm package: @smontero/keycatjs
Description: this compact and efficient client library provides access to Keycat service. See below for a list of supported APIs.
Author: hanjaekwon
Latest version: 0.9.4

# keycatjs

Javascript API for integration with Keycat.
![npm](https://img.shields.io/npm/dw/keycatjs.svg)

# Installation
```javascript
npm install keycatjs
yarn add keycatjs
```

# Usage
[API Documentation](https://keycatdev.gitbook.io/keycatjs/)
npm package: @smooke09/eslint-config
Description: ESLint configuration used by Smooke09.
Latest version: 2.5.2

# ESLint config

- Me basei no eslint disponibilizado pela Rocketseat, porém fiz algumas alterações para que se adeque ao meu estilo de código.

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

### React (with Next.js)

Install dependencies:
```
npm i @smooke09/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": [
    "@smooke09/eslint-config/next", 
    "next/core-web-vitals"
  ]
}
```

### React (without Next.js)

Install dependencies:
```
npm i -D eslint @smooke09/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@smooke09/eslint-config/react"
}
```

### Node.js

Install dependencies:
```
npm i -D eslint @smooke09/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@smooke09/eslint-config/node"
}
```

### Native

Install dependencies:
```
npm i -D eslint @smooke09/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@smooke09/eslint-config/native"
}
```
npm package: @smooks/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: sungminkim
Latest version: 1.0.0

# @smooks/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 @smooks/use-before-leave ```

npm

``` npm i @smooks/use-before-leave ```

## Usage

```js
    import React from "react";
    import useBeforeLeave from "@smooks/use-before-leave";

    function App() {
        const beforeLeave = () => console.log("User is leaving...");
        useBeforeLeave(beforeLeave);
        return <h1>Hello Nooks</h1>;
    }
```

## Argument

| Argument | Type | Description | Required |
| -------- | -------- | -------- | -------- |
| onBeforeLeave | function | Function to be called when the mouse leaves the document | yes |
npm package: @smooks/use-click
Description: React Hook to detect click of element.
Author: sungminkim
Latest version: 1.0.0

# @smooks/use-click

React Hook to detect click of element.

## Installation

yarn

``` yarn add @smooks/use-click ```

npm

``` npm i @smooks/use-click ```

## Usage

```js
    import useClick from '@smooks/use-click';

    const Click = () => {
    const sayHello = () => alert("Element was clicked!");
    const title = useClick(sayHello);
    return (
        <>
            <div className="App">
                <h1 ref={title}>Hello</h1>
            </div>
            <Link to="/"><button>go to home</button></Link>
        </>
    );
};
```

## Argument

| Argument | Type | Description | Required |
| -------- | -------- | -------- | -------- |
| onClick | function | A function that start when click event is happened. | yes |
npm package: @smooks/use-confirm
Description: React Hook to ask the user for a confirmation before executing a function.
Author: sungminkim
Latest version: 1.0.0

# @smooks/use-confirm
React Hook to ask the user for a confirmation before executing a function.

## Installation
yarn

``` yarn add @smooks/use-confirm ```

npm

``` npm i @smooks/use-confirm ```

## Usage

```js 
    import React from "react";
    import useConfirm from "@smooks/use-confirm";

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

## Argument

| Argument   | Type     | Description                                            | Required |
| ---------- | -------- | ------------------------------------------------------ | -------- |
| message    | string   | Message to show the user on the confirmation prompt  | 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: @smooks/use-fadein
Description: A React hook that applies a fade-in animation effect to elements when they are mounted or become visible.
Author: sungminkim
Latest version: 1.0.0

# @smooks/use-fadein

A React hook that applies a fade-in animation effect to elements when they are mounted or become visible.

## Installation

yarn

``` yarn add @smooks/use-fadein ```

npm

``` npm i @smooks/use-fadein ```

## Usage

```js
    import useFadeIn from '@smooks/use-fadein';

    const FadeIn = () => {
        const fadeInH1 = useFadeIn(1, 2);
        const fadeInP = useFadeIn(5, 10);
        return (
            <>
            <div className="App">
                <h1 {...fadeInH1}>Hello</h1>
                <p {...fadeInP}>Loream ipsum lalalala</p>
            </div>
            </>
        );
    };
```

## Argument

| Argument   | Type     | Description                                            | Required |
| ---------- | -------- | ------------------------------------------------------ | -------- |
| duration    | number   | The length of time an action, process, or effect lasts.  | yes      |
| delay  | number | The amount of time before an action or effect takes place.       | yes      |
npm package: @smooks/use-input
Description: React hook for simplifying input state manangement.
Author: sungminkim
Latest version: 1.0.1

# @smooks/use-input

React Hook for simplifying input state management.

## Installation

yarn

``` yarn add @smooks/use-input ```

npm

``` npm i @smooks/use-input ```

## Usage

```js
    import useInput from '@smooks/use-input';

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

## Argument

| Argument | Type | Description | Required |
| -------- | -------- | -------- | -------- |
| initialValue | string | The default or initial value set for an input field before user interaction. | yes |
| validator | function |  A custom function used to validate user input, ensuring it meets specific criteria or constraints. | yes |
npm package: @smooks/use-network
Description: React Hook to listen when the user goes online or offline.
Author: sungminkim
Latest version: 1.0.1

# @smooks/use-network

React Hook to listen when the user goes online or offline.

## Installation

yarn

``` yarn add @smooks/use-network ```

npm

``` npm i @smooks/use-network ```

## Usage

```js
    import React from "react";
    import useNetwork from "@smooks/use-network";

    function App() {
        const onNetworkChange = isOnline =>
            console.log(isOnline ? "We are back online" : "We just got offline");
        const isOnline = useNetwork(onNetworkChange);
        return <h1>{isOnline ? "We are online" : "We are offline"}</h1>;
    }
```

## Argument

| 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: @smooks/use-notify
Description: React Hook for using web browser notifications in your application.
Author: sungminkim
Latest version: 1.0.0

# @smooks/use-notify

React Hook for using web browser notifications in your application.

## Installation

yarn

``` yarn add @smooks/use-notify ```

npm

``` npm i @smooks/use-notify ```

## Usage

```js
    import useNotification from '@smooks/use-notify';

    const App = () => {
        const trigerNotification = useNotification("Can I steal your kimchi?", {
            body: "I love kimchi, don't you?"
        });
        return (
            <div className="App">
                <button onClick={trigerNotification}>Hello</button>
            </div>
        );
    };
```

## Arguments

| Argument | Type | Description | Required |
| -------- | ---- | ----------- | -------- |
|  title   | string | This is a string that represents the title or heading of the notification. | yes |
|  options | object | Notification options are configuration settings that customize the appearance and behavior of a notification, such as its body, icon, and sound. | no |

**It only works when you ***<span style="color:red;">turn on the notification in Settings!***</span>**

Information about setting notification ⬇️

Window: Start > Settings > System > Notification

macOS: System Preferences > Notifications > select chrome > change notification settings

If you need some help, please write email to me:       <0724ksm@naver.com>
npm package: @smooks/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Author: sungminkim
Latest version: 1.0.0

# @smooks/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 @smooks/use-prevent-leave ```

npm

``` npm i @smooks/use-prevent-leave ```

## Usage

```js
    import React from "react";
    import usePreventLeave from "@smooks/use-prevent-leave";

    function App() {
        const { enablePrevent, disablePrevent } = usePreventLeave();
        const saveChanges = async () => {
            enablePrevent();
            await sendToApi();
            disablePrevent();
        };
        return <button onClick={saveChanges}>Save changes</button>;
    }
```

## 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: @smooks/use-tabs
Description: React hook for handling tab navigation.
Author: sungminkim
Latest version: 1.0.1

# @smooks/use-tabs

React hook for handling tab navigation.

## Installation

yarn

``` yarn add @smooks/use-tabs ```

npm

``` npm i @smooks/use-tabs ```

## Usage

```js
    const content = [
        {
            tab: "Section 1",
            content: "I'm the content of the Section 1"
        },
        {
            tab: "Section 2",
            content: "I'm the content of the Section 2"
        }
    ];
    
    const Tab = () => {
    const { currentItem, changeItem } = useTabs(0, content);
    return (
        <div className="App">
            {content.map((section, index) => (
            <button onClick={() => changeItem(index)}>{section.tab}</button>
            ))}
        <div>{currentItem.content}</div>
        </div>
    );
};
```
npm package: @smooks/use-title
Description: React Hook to update your document's title.
Author: Sungmin Kim
Latest version: 1.0.1

# @smooks/use-title

React Hook to update your document's title.

## Installation

yarn

``` yarn add @smooks/use-title ```

npm

``` npm i @smooks/use-title ```

## Usage

```js 
    import React from "react";
    import useTitle from "@smooks/use-title";

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

## Argument

| Argument   | Type     | Description                                            | Required |
| ---------- | -------- | ------------------------------------------------------ | -------- |
| title    | string   | The title you want to use on your document  | yes      |
npm package: @smoooookie/servar-telegram-bot
Description: [![NPM Version](https://img.shields.io/npm/v/%40smoooookie%2Fservar-telegram-bot)](https://www.npmjs.com/package/@smoooookie/servar-telegram-bot)
Latest version: 1.0.2

# @smoooookie/servar-telegram-bot

[![NPM Version](https://img.shields.io/npm/v/%40smoooookie%2Fservar-telegram-bot)](https://www.npmjs.com/package/@smoooookie/servar-telegram-bot)

Bot for notifications.

## Usage

```bash
npx @smoooookie/servar-telegram-bot -h
```

### Environment variables

All optional, command will ask you to prompt if not set.

```
# Telegram-token:
TELEGRAM_BOT_TOKEN=<string>
# Usernames of allowed to interact with bot users (any if empty):
TELEGRAM_BOT_WHITELIST=<string>
# Name of file that contains registered chats:
TELEGRAM_BOT_SUBSCRIBERS_PATH=<string>
# Name of file contains data:
DATA_PATH=<string>
# Command to start fetching data process:
FETCH_COMMAND=<string>
```

### Programmatically

```bash
npm i @smoooookie/servar-telegram-bot
```

```javascript
import { telegramBot } from "@smoooookie/servar-telegram-bot";

// Start bot:
await telegramBot.startPolling();
// Watch data:
await telegramBot.watchData();
```

## Api docs

See [here](./docs/README.md).
npm package: @smoosee/vite-plugin-angular
Description: A minimal plugin to support Angular applications building with Vite
Author: Mostafa Sherif
Latest version: 1.0.5

<div align="center">

<h1> vite-plugin-angular </h1>
A minimal plug-n-play plugin to support Angular applications building with Vite.

[![][img.release]][link.release]
[![][img.license]][link.license]

![][img.node]
![][img.npm]
![][img.downloads]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Install](#install)
- [How it works](#how-it-works)

## Install

1. Install the plugin:

```shell
yarn add @smoosee/vite-plugin-angular -D
```

2. Add the plugin

```ts
import { defineConfig } from 'vite';
import VitePluginAngular from '@smoosee/vite-plugin-angular';

export default defineConfig({
    plugins: [VitePluginAngular()],
});
```

[img.release]: https://img.shields.io/github/actions/workflow/status/smoosee/vite-plugin-angular/release.yml?logo=github&label=release
[img.license]: https://img.shields.io/github/license/smoosee/vite-plugin-angular?logo=github
[img.node]: https://img.shields.io/node/v/@smoosee/vite-plugin-angular?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]: https://img.shields.io/npm/v/@smoosee/vite-plugin-angular?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=
[img.downloads]: https://img.shields.io/npm/dt/@smoosee/vite-plugin-angular?logo=docusign&logoColor=white&labelColor=purple&color=grey&label=
[img.banner]: https://nodei.co/npm/@smoosee/vite-plugin-angular.png
[link.release]: https://github.com/smoosee/vite-plugin-angular/actions/workflows/release.yml
[link.license]: https://github.com/smoosee/vite-plugin-angular/blob/master/LICENSE
[link.npm]: https://npmjs.org/package/@smoosee/vite-plugin-angular
npm package: @smoosee/vite-plugin-sass
Description: Utilities for resolving sass url paths
Author: Mostafa Sherif
Latest version: 1.0.3

<div align="center">

<h1> vite-plugin-sass </h1>
Vite plugin for resolving sass urls.

[![][img.release]][link.release]
[![][img.license]][link.license]

![][img.node]
![][img.npm]
![][img.downloads]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Install](#install)
- [How it works](#how-it-works)

## Install

1. Install the plugin:

```shell
yarn add @smoosee/vite-plugin-sass -D
```

2. Add the plugin

```ts
import { defineConfig } from 'vite';
import VitePluginSass from '@smoosee/vite-plugin-sass';

export default defineConfig({
    plugins: [VitePluginSass()],
});
```

## How it works

-   This plugin is meant mainly to fix a long standing issue with vite [`7651`](https://github.com/vitejs/vite/issues/7651)/[`11012`](https://github.com/vitejs/vite/issues/11012).

-   The plugin is enforced `pre`, and it compiles the original sass code into css (not redundant to the vite compiling process).

-   Using `source-maps` library inside a `postcss` plugin to resolve the original paths of where `url()` methods are called in the `.scss` files, and updating the source files with the relative address of those assets to the root `.scss` file.

[img.release]: https://img.shields.io/github/actions/workflow/status/smoosee/vite-plugin-sass/release.yml?logo=github&label=release
[img.license]: https://img.shields.io/github/license/smoosee/vite-plugin-sass?logo=github
[img.node]: https://img.shields.io/node/v/@smoosee/vite-plugin-sass?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]: https://img.shields.io/npm/v/@smoosee/vite-plugin-sass?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=
[img.downloads]: https://img.shields.io/npm/dt/@smoosee/vite-plugin-sass?logo=docusign&logoColor=white&labelColor=purple&color=grey&label=
[img.banner]: https://nodei.co/npm/@smoosee/vite-plugin-sass.png
[link.release]: https://github.com/smoosee/vite-plugin-sass/actions/workflows/release.yml
[link.license]: https://github.com/smoosee/vite-plugin-sass/blob/master/LICENSE
[link.npm]: https://npmjs.org/package/@smoosee/vite-plugin-sass
npm package: @smoosee/wakemeup
Description: Tool to keep windows machine awake and hotkey to turn monitor off
Author: Mostafa Sherif
Latest version: 1.20.0

<div style="text-align:center;" align="center">
    <h1>wakemeup</h1>
    <p>Tool to keep windows machine awake and hotkey to turn monitor off.</p>
    
[![][img.release]][link.release]
[![][img.license]][link.license]

![][img.node]
![][img.npm]
![][img.downloads]

[![][img.health]][link.snyk]

[![][img.banner]][link.npm]

</div>

[img.release]: https://img.shields.io/github/actions/workflow/status/smoosee/wakemeup/release.yml?logo=github&label=release
[img.license]: https://img.shields.io/github/license/smoosee/wakemeup?logo=github
[img.node]: https://img.shields.io/node/v/@smoosee/wakemeup?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]: https://img.shields.io/npm/v/@smoosee/wakemeup?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=
[img.downloads]: https://img.shields.io/npm/dt/@smoosee/wakemeup?logo=docusign&logoColor=white&labelColor=purple&color=grey&label=
[img.health]: https://snyk.io/advisor/npm-package/@smoosee/wakemeup/badge.svg
[img.banner]: https://nodei.co/npm/@smoosee/wakemeup.png
[link.release]: https://github.com/smoosee/smoosee/actions/workflows/release.yml
[link.license]: https://github.com/smoosee/smoosee/blob/master/LICENSE
[link.npm]: https://npmjs.org/package/@smoosee/wakemeup
[link.snyk]: https://snyk.io/advisor/npm-package/@smoosee/wakemeup


<h2>Table of Contents</h2>

- [Installation](#installation)
  - [PM2](#pm2)
  - [How it works](#how-it-works)
  - [Monitor Off Hotkey](#monitor-off-hotkey)



## Installation
Simply run
```
npm i -g @smoosee/wakemeup
```

Now you will be able to run
```
wakemeup
```

### PM2
If you would like to run this with `pm2` to run indefinitely, simply run `wakemeup pm2` which will use your `pm2` instance to start `wakemeup` in the background.


### How it works
This tool simply mimics a ScrollLock button press every 150 seconds. This way your machine will stay awake even if you are away.

### Monitor Off Hotkey
To turn off monitor, use the hotkey Window(Meta) + Alt + O.
npm package: @smooshgate/react-toggler
Description: A render-prop component for toggling boolean values.
Author: Colton Colcleasure
Latest version: 1.0.1

# @smooshgate/react-toggler

A render-prop component for toggling boolean values.

[Demo](https://codesandbox.io/s/3kvvk0jp85)

```js
import Toggler from '@smooshgate/react-toggler'

const App = () => (
  <div>
    <Toggler foo={true} bar={false} baz={false}>
      {(toggle, toggledState) => (
        <React.Fragment>
          <div className="buttons">
            <button onClick={toggle.foo}>toggle foo</button>
            <button onClick={toggle.bar}>toggle bar</button>
            <button onClick={toggle.baz}>toggle baz</button>
          </div>
          <p>foo toggled on: {String(toggledState.foo)}</p>
          <p>bar toggled on: {String(toggledState.bar)}</p>
          <p>baz toggled on: {String(toggledState.baz)}</p>
        </React.Fragment>
      )}
    </Toggle>
  </div>
)
```