open-index/open-npm huggingface dataset:
npm package: @hookbase/cli
Description: CLI tool for Hookbase - manage webhooks and localhost tunnels
Author: Hookbase
Latest version: 2.2.0

# @hookbase/cli

The official CLI for [Hookbase](https://hookbase.app) - manage webhooks, create localhost tunnels, and monitor deliveries from your terminal.

## Installation

```bash
npm install -g @hookbase/cli
```

## Quick Start

```bash
# Login to your account
hookbase login

# Start a tunnel to receive webhooks locally
hookbase tunnels start 3000

# Or launch the interactive dashboard
hookbase dashboard
```

## Features

- **Full API Access** - Create and manage sources, destinations, routes, and more
- **Localhost Tunnels** - Expose local servers to receive webhooks during development
- **Interactive Dashboard** - Visual TUI with keyboard navigation
- **Live Event Streaming** - Watch webhook events in real-time
- **Delivery Management** - View, debug, and replay failed deliveries
- **CI/CD Ready** - JSON output and environment variable support

## Commands

### Authentication
```bash
hookbase login          # Authenticate with Hookbase
hookbase logout         # Clear credentials
hookbase whoami         # Show current user
```

### Resources
```bash
hookbase sources list        # List webhook sources
hookbase sources create      # Create a new source

hookbase destinations list   # List destinations
hookbase destinations create # Create a destination

hookbase routes list         # List routes
hookbase routes create       # Create a route
```

### Tunnels
```bash
hookbase tunnels start 3000           # Create and connect a tunnel
hookbase tunnels list                  # List all tunnels
hookbase tunnels connect <id> <port>   # Connect to existing tunnel
```

### Events & Deliveries
```bash
hookbase events list              # List recent events
hookbase events follow            # Stream live events
hookbase deliveries list          # List deliveries
hookbase deliveries replay <id>   # Replay a failed delivery
```

### API Keys
```bash
hookbase api-keys list       # List API keys
hookbase api-keys create     # Create a new API key
hookbase api-keys revoke <id> # Revoke an API key
```

### Interactive Dashboard
```bash
hookbase dashboard    # Launch TUI dashboard
```

Navigate with `Tab` or number keys `1-6`, use arrow keys to browse lists, `Enter` to select, and `Esc` to go back.

## Environment Variables

```bash
HOOKBASE_API_KEY   # API key for authentication
HOOKBASE_API_URL   # Custom API URL
HOOKBASE_ORG_ID    # Default organization ID
```

## CI/CD Usage

```bash
export HOOKBASE_API_KEY="whr_live_xxx"
hookbase sources list --json
hookbase deliveries bulk-replay --status failed --yes
```

## Documentation

- [CLI Commands Reference](https://www.hookbase.app/docs/receive/cli/commands)
- [API Documentation](https://www.hookbase.app/docs/receive/api)
- [Tunnels Guide](https://www.hookbase.app/docs/receive/guide/tunnels)

## License

MIT
npm package: @hookcompany/feathers-client-custom-methods
Description: ️🏹 Create feathers service on client with custom methods names.
Author: Hook Company Team
Latest version: 1.0.2

# Feathers Client Custom Methods

## 🏹 Create feathers service on client with custom methods names.

[![NPM version](https://badge.fury.io/js/%40hookcompany%2Ffeathers-client-custom-methods.png)](http://badge.fury.io/js/%40hookcompany%2Ffeathers-client-custom-methods)

[![Npm Downloads](https://nodei.co/npm/@hookcompany%2Ffeathers-client-custom-methods.png?downloads=true)](https://nodei.co/npm/@hookcompany%2Ffeathers-client-custom-methods.png?downloads=true)

## Getting Started

Use npm:

```sh
npm install --save @hookcompany/feathers-client-custom-methods
```

Or use yarn:

```sh
yarn add @hookcompany/feathers-client-custom-methods
```

## Prerequisite

Install @hookcompany/feathers-custom-methods on server ([Fathers Custom Methods](https://www.npmjs.com/package/@hookcompany/feathers-custom-methods))

## Config

#### Bootstrap

```javascript
import feathers from '@feathersjs/feathers';
import feathersRestClient from '@feathersjs/rest-client';
import axios from 'axios';

import feathersCustomMethods from '@hookcompany/feathers-client-custom-methods';

const HTTP_URI = '<endPoint>';
const rest = feathers()
  .configure(feathersRestClient(HTTP_URI).axios(axios));

feathersCustomMethods.bootstrap(rest)
  .then(Feathers => {
    const Feeds = Feathers.service('feeds');

    Feeds.foo()
      .then(console.log)
      .catch(console.log);
  });

```

#### or

#### Options

```javascript
import feathers from '@feathersjs/feathers';
import feathersRestClient from '@feathersjs/rest-client';
import axios from 'axios';

import feathersCustomMethods from '@hookcompany/feathers-client-custom-methods';

const HTTP_URI = '<endPoint>';
const rest = feathers()
  .configure(feathersRestClient(HTTP_URI).axios(axios))
  .configure(feathersCustomMethods());

const Feeds = rest.service('feeds', [
  'foo:find',
  'bar:find',
  'buzz:get',
  'foobar:create',
  'foobuzz:update',
  'barbuzz:patch',
  'foobarbuzz:remove'
]);

Feeds.foo()
  .then(console.log)
  .catch(console.log);
```

## Consuming The Service Methods

You can consume the service methods, like that:

#### Method foo(find)

[GET] localhost:3030/users/foo

#### Method bar(find)

[GET] localhost:3030/users/bar

#### Method buzz(get)

[GET] localhost:3030/users/buzz/:id

#### Method foobar(create)

[POST] localhost:3030/users/foobar

#### Method foobuzz(update)

[PUT] localhost:3030/users/foobuzz/:id

#### Method barbuzz(patch)

[PATCH] localhost:3030/users/barbuzz/:id

#### Method foobarbuzz(remove)

[DELETE] localhost:3030/users/foobarbuzz/:id
npm package: @hookeasy/use-axios
Description: React Hook to update your useAxios event
Author: kingname
Latest version: 1.0.0

# @hookeasy/use-use-axios

React Hook to update your useAxios event

### install
```
npm i @hookeasy/use-useAxios

or

yarn add @hookeasy/use-useAxios
```

### example

```javascript
import React from "react";
import ReactDOM from "react-dom";
import useAxios from "@hookeasy/use-axios";

const App = () => {
  const { loading, data, error, refetch } = useAxios({
    url: "https://yts.lt/api/v2/list_movies.json"
  });

  return (
    <div className="App">
      <h1>{data && data.status}</h1>
      <h2>{loading & "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-beforeleave
Description: React Hook to update your useBeforeLeave event
Author: kingname
Latest version: 1.0.0

# @hookeasy/use-beforeleave

React Hook to update your useBeforeLeave event

### install
```
npm i @hookeasy/use-useBeforeLeave

or

yarn add @hookeasy/use-useBeforeLeave
```

### example

```javascript
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import useBeforeLeave from "@hookeasy/use-beforeleave";

function App() {
  const begForLife = () => console.log("Pls dont leave");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-click
Description: React Hook to update your useClick event
Author: kingname
Latest version: 1.0.0

# @hookeasy/use-useClick

React Hook to update your useClick event

### install
```
npm i @hookeasy/use-useClick

or

yarn add @hookeasy/use-useClick
```

### example

```javascript
import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import useClick from "@hookeasy/use-click";

const App = () => {
  const sayHello = () => console.log("say Hello");

  const title = useClick(sayHello);

  return (
    <div className="App">
      <h1 ref={title}>HI</h1>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-confirm
Description: React Hook to update your confirm event
Author: kingname
Latest version: 1.0.0

# @hookeasy/use-confirm

React Hook to update your confirm event

### install
```
npm i @hookeasy/use-confirm

or

yarn add @hookeasy/use-confirm
```

### example

```javascript
import React from "react";
import ReactDOM from "react-dom";
import useConfirm from "@hookeasy/use-confirm";

const App = () => {
  const deleteWorld = () => console.log("Deleting the word");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure", deleteWorld, abort);

  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
npm package: @hookeasy/use-fadein
Description: React Hook to update your fadein event
Author: kingname
Latest version: 1.0.2

# @hookeasy/use-fadein

React Hook to update your fadein event

### install
```
npm i @hookeasy/use-fadein

or

yarn add @hookeasy/use-fadein
```

### example

```javascript
import React from "react";
import ReactDOM from "react-dom";
import useFadeIn from "@hookeasy/use-fadein";

const App = () => {
  const fadeInH1 = useFadeIn(3, 2);
  const fadeInP = useFadeIn(5, 5);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello CodeSandbox</h1>
      <p {...fadeInP}>lorem ipsum alallala</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-hover
Description: React Hook to update your hover event
Author: kingname
Latest version: 1.0.1

# @hookeasy/use-hover

React Hook to update your hover event

### install
```
npm i @hookeasy/use-hover

or

yarn add @hookeasy/use-hover
```

### example

```javascript
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useHover from "@hookeasy/use-hover";

const App = () => {
  const sayHello = () => console.log("say Hello");

  const title = useHover(sayHello);

  return (
    <div className="App">
      <h1 ref={title}>HI</h1>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
npm package: @hookeasy/use-input
Description: React Hook to update your useInput
Author: kingname
Latest version: 1.0.1

# @hookeasy/use-useInput

React Hook to update your useInput

### install
```
npm i @hookeasy/use-useInput

or

yarn add @hookeasy/use-useInput
```

### example

```javascript
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useInput from "@hookeasy/use-input";

function App() {
  const maxLen = value => value.length < 10;
  const name = useInput("Mr. ", maxLen);

  return (
    <div className="App">
      <input placeholder="Name" {...name} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
npm package: @hookeasy/use-network
Description: React Hooks to update your network event
Author: kingname
Latest version: 1.0.2

# @hookeasy/use-network

React Hook to update your network status event

### install
```
npm i @hookeasy/use-network

or

yarn add @hookeasy/use-network
```

### example

```javascript
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import useNetwork from "@hookeasy/useNetwork";

const App = () => {
  const handleNetworkChagne = online => {
    console.log(online ? "We just went online" : "We are Offline");
  };
  const onLine = useNetwork(handleNetworkChagne);
  return (
    <div className="App">
      <h1>{onLine ? "Online" : "Offline"}</h1>
      <p>lorem ipsum alallala</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-notification
Description: React Hooks to update your notification
Author: kingname
Latest version: 1.0.1

# @hookeasy/use-notification

React Hook to update your notification event

### install
```
npm i @hookeasy/use-notification

or

yarn add @hookeasy/use-notification
```

### example

```javascript
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import useNotification from "@hookeasy/use-notification";

const App = () => {
  const triggerNotif = useNotification("hello guys", {
    body: "goood!!"
  });
  return (
    <div className="App">
      <button onClick={triggerNotif}>Hello</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


```
npm package: @hookeasy/use-preventleave
Description: React Hooks to update your preventleave
Author: kingname
Latest version: 1.0.0

# @hookeasy/use-preventleave

React Hook to update your preventleave event

### install
```
npm i @hookeasy/use-preventleave

or

yarn add @hookeasy/use-preventleave
```

### example

```javascript
import React from "react";
import ReactDOM from "react-dom";
import usePreventLeave from "@hookeasy/use-preventleave";

const App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();

  return (
    <div className="App">
        <button onClick={enablePrevent}>protect</button>
        <button onClick={disablePrevent}>unprotect</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
npm package: @hookeasy/use-scroll
Description: React Hook to update your Scroll event
Author: kingname
Latest version: 1.0.2

# @hookeasy/use-scroll

React Hook to update your scroll event

### install
```
npm i @hookeasy/use-scroll

or

yarn add @hookeasy/use-scroll
```

### example

```javascript
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import useScroll from "@hookeasy/use-scroll";

function App() {
  const { y } = useScroll();

  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "red" : "black" }}>
        Hello CodeSandbox
      </h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
npm package: @hookeasy/use-tabs
Description: React Hook to help your tabs controller
Author: kingname
Latest version: 1.0.2

# @hookeasy/use-tabs

React Hook to help your tabs controller

### install
```
npm i @hookeasy/use-tabs

or

yarn add @hookeasy/use-tabs
```

### example

```javascript
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useTabs from "@hookeasy/use-tabs";

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"
    }
];

function App() {
    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>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-title
Description: React Hook to update your document's title
Author: limgeun
Latest version: 1.0.2

# @hookeasy/use-title

React Hook to update your document's title

### install
```
npm i @hookeasy/use-title

or

yarn add @hookeasy/use-title
```

### example

```javascript
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import useTitle from "@hookeasy/use-title";

const App = () => {
    const titleUpdater = useTitle("Loading...");
    setTimeout(() => titleUpdater("Home"), 5000);
    return (
        <div className="App">
            <div>hi</div>
        </div>
    );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
npm package: @hookeasy/use-usefullscreen
Description: React Hook to update your usefullscreen event
Author: kingname
Latest version: 1.0.1

# @hookeasy/use-usefullscreen

React Hook to update your usefullscreen event

### install
```
npm i @hookeasy/use-usefullscreen

or

yarn add @hookeasy/use-usefullscreen
```

### example

```javascript
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useFullscreen from "@hookeasy/use-usefullscreen";

const App = () => {
  const sayHello = () => console.log("say Hello");

  const {triggerFull, exitFull} = usefullscreen(sayHello);

  return (
    <div className="App">
      <img ref={el} />
      <button onClick={triggerFull}>HI</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
npm package: @hooked-so/mcp
Description: Hooked MCP Server — Let AI agents create videos via the Hooked API
Latest version: 0.1.1

# Hooked MCP Server

Model Context Protocol server for the [Hooked Video API](https://hooked.so/api). Let AI agents (Claude, GPT, Cursor, etc.) create videos programmatically.

## Quick Setup

### 1. Get your API key

Sign up at [hooked.so](https://hooked.so) and create an API key in Settings → API Keys.

### 2. Add to Claude Desktop

Add this to your `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "hooked": {
      "command": "npx",
      "args": ["-y", "@hooked-so/mcp"],
      "env": {
        "HOOKED_API_KEY": "your_api_key_here"
      }
    }
  }
}
```

### 3. Add to Cursor

Add this to your `.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "hooked": {
      "command": "npx",
      "args": ["-y", "@hooked-so/mcp"],
      "env": {
        "HOOKED_API_KEY": "your_api_key_here"
      }
    }
  }
}
```

## Available Tools

| Tool | Description |
|------|-------------|
| `list_avatars` | List available AI avatars |
| `list_voices` | List available AI voices |
| `list_music` | List background music tracks |
| `create_script_to_video` | Create video from a script with AI avatar |
| `create_prompt_to_video` | Create video from a text prompt (AI generates everything) |
| `create_tiktok_slideshow` | Create TikTok-style slideshow |
| `create_ugc_ad` | Create UGC-style ad video |
| `get_video` | Check video status and get download URL |
| `list_videos` | List recent videos |
| `get_trending_videos` | Get trending videos for inspiration |

## Example Prompts

Once connected, you can ask your AI assistant:

- "Create a 30-second product video for my new app using avatar Sophia"
- "Make a TikTok slideshow about 5 productivity tips"
- "What avatars are available? Show me the female ones"
- "Check the status of my last video"
- "What's trending on TikTok in the fitness niche?"

## Environment Variables

| Variable | Required | Description |
|----------|----------|-------------|
| `HOOKED_API_KEY` | Yes | Your Hooked API key |
| `HOOKED_API_URL` | No | Custom API base URL (default: `https://api.hooked.so`) |

## Development

```bash
pnpm install
pnpm build
```

## License

MIT
npm package: @hooked74/create-library
Description: Set up a library by running one command
Author: Igor Novikov
Latest version: 2.2.4

<h1 align="center"><strong>Create Library</strong></h1>

[![Build Status](https://travis-ci.org/Hooked74/create-library.svg?branch=master)](https://travis-ci.org/Hooked74/create-library)
[![npm](https://img.shields.io/npm/v/@hooked74/create-library)](https://www.npmjs.com/package/@hooked74/create-library)
[![License](https://img.shields.io/npm/l/@hooked74/create-library)](https://github.com/Hooked74/create-library/blob/master/LICENSE)

<br />

<div style="text-align: center;" align="center"><img src="https://i.imgur.com/nm9UcDY.png" alt="tools" height="200"/></div>

This application generates a starter library kit.

## Table of contents

<!--ts-->
   * [Usage](#usage)
   * [Options](#command-options)
   * [Configuration](#configuration)
<!--te-->

## Usage

```
npx @hooked74/create-library [<name>]
```

**name** is optional parameter.

## Command Options

**-c, --config <json|file>**

Transfer partial or full configuration in json format or in file format for library generation.

**-f, --force**

Generate library with default configuration options (from *default-config.json* file).

**-e, --extended**

Force you to select advanced options in the interactive menu: react, storybook, cypress. By default these options are **true**.

## Configuration

The configuration has the following structure:

```json
{
  "name": "my-library",
  "scope": "hooked74",
  "author": "Igor Novikov",
  "email": "novikovio74@gmail.com",
  "repoAuthor": "Hooked74",
  "repoName": "my-library",
  "typePrefix": "H74",
  "react": true,
  "storybook": true,
  "cypress": true
}
```

### **name**

It is used for: creating a local directory, generating a package name, generating a repository name (if **repoName** is not used), generating the main type namespace, generating final assembly files, etc. It is a required parameter.

### **scope**

It is used to generate the full package name. It is a optional parameter.

### **author**

It is used to generate author in **package.json** and generate license. It is a optional parameter.

### **email**

It is used to generate author in **package.json** and for feedback in **travis-ci** configuration. It is a optional parameter.

### **repoAuthor**

It is used to generate the full repository name in many parts of the environment. It is a required parameter.

### **repoName**

It is used to generate the full repository name in many parts of the environment. It is a optional parameter (if not specified then **name** will be used).

### **typePrefix**

It is used to generate standard type namespace alias. It is necessary to avoid type intersection in a global scope. It is a optional parameter.

### **react**

Flag that is responsible for using React and everything related to it in the created project. Default: **true**.

### **storybook**

Flag that is responsible for using Storybook and everything related to it in the created project. Default: **true**.

### **cypress**

Flag that is responsible for using Cypress and everything related to it in the created project. Default: **true**.
npm package: @hooked74/project-tools
Description: Helper tools for project
Author: Igor Novikov
Latest version: 1.3.10

<h1 align="center"><strong>Project Tools</strong></h1>

[![Build Status](https://travis-ci.org/Hooked74/project-tools.svg?branch=master)](https://travis-ci.org/Hooked74/project-tools)
[![npm](https://img.shields.io/npm/v/@hooked74/project-tools)](https://www.npmjs.com/package/@hooked74/project-tools)
[![License](https://img.shields.io/npm/l/@hooked74/project-tools)](https://github.com/Hooked74/project-tools/blob/master/LICENSE)

## Table of contents

<!--ts-->
   * [Install](#install)
   * [Usage](#usage)
   * [Available Commands](#available-commands)
<!--te-->

## Install

```
npm install @hooked74/project-tools
```

## Usage

```
project-tools <command>
```

## Available Commands

### **size**

Add the size of the minified gzip module to the **.size-snapshot.json** file. Converts size from bytes, leading it to optimal.

### **types**

Format types in a compiled project and add common types from **src/react-app-env.d.ts** to the **dist/common.d.ts**. Also add a reference to the **common.d.ts** file in **index.d.ts**.

### **chain-commands**

start the first npm process and while it's running it execute the second npm process. Usage:

```
project-tools chain-commands [options] <command1> <command2>
```

Has the following options:

- **-p, --port &lt;port&gt;** &nbsp;process port
- **-t, --timeout &lt;timeout&gt;** &nbsp;first process timeout

### **test**

This command is a stripped down version of [react-scripts test](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts). Usage:

```
project-tools test [options]
```

The command has the same options as [Jest](https://jestjs.io/docs/en/cli). More information can be obtained [here](https://create-react-app.dev/docs/running-tests).
npm package: @hooked74/single-purpose-emitter
Description: Single purpose emitter
Author: Igor Novikov
Latest version: 1.2.5

<h1 align="center"><strong>Single Purpose Emitter</strong></h1>

[![Build Status](https://travis-ci.org/Hooked74/single-purpose-emitter.svg?branch=master)](https://travis-ci.org/Hooked74/single-purpose-emitter)
[![npm](https://img.shields.io/npm/v/@hooked74/single-purpose-emitter)](https://www.npmjs.com/package/@hooked74/single-purpose-emitter)
[![License](https://img.shields.io/npm/l/@hooked74/single-purpose-emitter)](https://github.com/Hooked74/single-purpose-emitter/blob/master/LICENSE)
[![Codecov](https://img.shields.io/codecov/c/github/hooked74/single-purpose-emitter?token=203907d891d1498e9910c58a0b720633)](https://codecov.io/gh/Hooked74/single-purpose-emitter)
[![Module Size](https://img.shields.io/badge/dynamic/json?color=success&label=module%20size&query=%24.module&url=https%3A%2F%2Fraw.githubusercontent.com%2FHooked74%2Fsingle-purpose-emitter%2Fmaster%2F.size-snapshot.json)](https://github.com/Hooked74/single-purpose-emitter/blob/master/.size-snapshot.json)

## Install

```
npm install @hooked74/single-purpose-emitter
```

## Usage

```js
// initialize
const emitter = new SinglePurposeEmitter();

// attach handlers
const handler1 = () => console.log("handler 1");
emitter.attach(handler1);
emitter.attach((value) => console.log("handler 2", value));

// dispatch
emitter.emit("some value");

// output:
// handler 1
// handler 2 some value

// detach specific handler
emitter.detach(handler1);

// detach all handlers
emitter.detach();

```
npm package: @hookers/use-data-loader
Description: __requires react 16.8+__
Author: Tyson Skiba
Latest version: 1.1.1

# @hookers/use-data-loader

__requires react 16.8+__

Wait for a dom element to appear then execute a callback

## install

```shell
yarn add @hookers/use-data-loader
```

```jsx
import { useDataLoader } from '@hookers/use-data-loader';

export const Example: React.FC = () => {
    const dataLoader = async (searchTerm: string) => {
        const data = await ExternalApiCall(searchTerm);
        return proccessData(data);
    } 

    const [read, { error, currentData, isLoading }] = useDataLoader(dataLoader);
    
    return (
        <>
            <input type="text" placeholder="search..." onBlur={evt => read(evt.target.value)} />
            { isLoading ? <div>Loading</div> : null }
            { error ? <div>Error</div> : null }
            { data ? <div>{ data }</div> : null }
        </>
    );
}
```
npm package: @hookers/use-observer
Description: __requires react 16.8+__
Author: Tyson Skiba
Latest version: 1.0.2

# @hookers/use-observer

__requires react 16.8+__

Wait for a dom element to appear then execute a callback

## install

```shell
yarn add @hookers/use-observer
```

Simple demo

```jsx
import { useObserver } from '@hookers/use-observer';

const onClick = () => {
    const demo = document.createElement('div');
    demo.id = 'demoId';
    document.body.appendChild(demo);
}

export const Example: React.FC = () => {
    const { once } = useObserver();

    React.useEffect(() => {
        once('#demoId', () => alert('callback!'));
    }, []);
    
    return <button onClick={onClick}>Click me</button>;
}
```

Simple demo with clear

```jsx
import { useObserver } from '@hookers/use-observer';

const onClick = () => {
    const demo = document.createElement('div');
    demo.id = 'demoId';
    document.body.appendChild(demo);
}

export const Example: React.FC = () => {
    const { clear, watch } = useObserver();

    React.useEffect(() => {
        watch('#demoId', () => alert('callback!'));
    }, []);
    
    return (
        <>
            <button onClick={onClick}>Click me</button>
            <button onClick={() => clear('#demoId')}>Clear</button>
        </>
    );
}
```
npm package: @hookers/use-wait-for-element
Description: __requires react 16.8+__
Author: Tyson Skiba
Latest version: 1.0.2

# @hookers/use-wait-for-element

__requires react 16.8+__

Wait for a dom element to appear then execute a callback

## install

```shell
yarn add @hookers/use-wait-for-element
```

```jsx
import { useWaitForElement } from '@hookers/use-wait-for-element';

const onClick = () => {
    const demo = document.createElement('div');
    demo.id = 'demoId';
    document.body.appendChild(demo);
}

export const Example: React.FC = () => {
    useWaitForElement('#demoId', () => aleart('callback!'));
    
    return <button onClick={onClick}>Click me</button>;
}
```
npm package: @hookfang/email-verifier
Description: Email Sytanx Validation
Author: Edwin Christie
Latest version: 1.0.3

# Email Verifier 
![CodeQL](https://github.com/hookFang/email-verifier/workflows/CodeQL/badge.svg)
[![NpmVersion](https://img.shields.io/npm/v/@hookfang/email-verifier?label=NPM&logo=npm)](https://www.npmjs.com/package/@hookfang/email-verifier)
![DownloadsWeekly](https://img.shields.io/npm/dw/@hookfang/email-verifier?color=blue&label=Downloads&logo=npm)
[![License](https://img.shields.io/npm/l/@hookfang/email-verifier?color=black&label=License)](https://github.com/hookFang/email-verifier/blob/master/LICENSE)

This is a NPM package that allows users to verify the E-mail entered by the user. It only checks the syntax of the E-mail ID entered by the user.
Gives the option to provide different domain names to change the Regex of the validator

## NPM Install

    npm i @hookfang/email-verifier
  
## Usage
```sh
# Import Package 
import EmailVerifier from "@hookfang/email-verifier"

#Add any specific Domain names, by default Domain Name: "com"
EmailVerifier.domainsValid({ domainsValid: ["com", "bix", "gov"] });

#Verify E-mail- Returns a true value if its a valid E-mail
EmailVerifier.verify("testing@gmail.com")
npm package: @hookflo/tern-cli
Description: Interactive webhook setup wizard for tern
Latest version: 0.1.1

# @hookflo/tern-cli

Interactive webhook setup wizard for the tern ecosystem.

## Usage

```bash
npx @hookflo/tern-cli
```

## What it does

- guides you through webhook handler setup
- generates handler files in the right location
- starts local webhook testing tunnel
- opens debugging dashboard automatically