# @bigbinary/neeto-webhooks-frontend

> Manage webhooks across neeto products.

Latest version **3.0.16** (published 2026-09-11) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @bigbinary/neeto-webhooks-frontend
pnpm add @bigbinary/neeto-webhooks-frontend
yarn add @bigbinary/neeto-webhooks-frontend
bun add @bigbinary/neeto-webhooks-frontend
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.16 |
| Published | 2026-09-11 |
| First published | 2023-02-02 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.13 |
| Dependencies | 2 |
| Unpacked size | 789.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BigBinary |
| Maintainers | neerajdotname, bigbinarybot, neetohq |

## Links

- npm: https://www.npmjs.com/package/@bigbinary/neeto-webhooks-frontend
- Repository: neeto-webhooks-nano
- Homepage: https://github.com/bigbinary/neeto-webhooks-nano
- Issues: https://github.com/bigbinary/neeto-webhooks-nano/issues
- npm.io page: https://npm.io/package/@bigbinary/neeto-webhooks-frontend

## Dependencies (2)

- [react-router-nav-prompt](https://npm.io/package/react-router-nav-prompt.md) 0.4.1
- [babel-plugin-transform-imports](https://npm.io/package/babel-plugin-transform-imports.md) ^2.0.0

## Recent versions

- 3.0.16 (latest) — 2026-09-11
- 3.0.2-beta (beta) — 2025-11-04
- 3.0.15 — 2026-08-27
- 3.0.14 — 2026-08-04
- 3.0.13 — 2026-06-11
- 3.0.12 — 2026-06-09
- 3.0.11 — 2026-02-27
- 3.0.10 — 2026-02-24
- 3.0.9 — 2026-02-20
- 3.0.8 — 2026-02-16
- 3.0.7 — 2026-01-05
- 3.0.6 — 2025-12-29
- 3.0.5 — 2025-11-20
- 3.0.4 — 2025-11-13
- 3.0.3 — 2025-11-12
- … 85 more at https://npm.io/package/@bigbinary/neeto-webhooks-frontend/versions

## README

# neeto-webhooks-nano

The `neeto-webhooks-nano` manages webhooks within neeto applications. The nano
exports the `@bigbinary/neeto-webhooks-frontend` NPM package
and `neeto-webhooks-engine` Rails engine for development.

# Contents

1. [Development with Host Application](#development-with-host-application)
   - [Engine](#engine)
     - [Installation](#installation)
     - [Usage](#usage)
   - [Frontend package](#frontend-package)
     - [Installation](#installation-1)
     - [Components](#components)
2. [Instructions for Publishing](#instructions-for-publishing)

# Development with Host Application

## Engine

The engine is used to manage webhooks across neeto products.

### Installation

1. Add this line to your application's Gemfile:

   ```ruby
   source "NEETO_GEM_SERVER_URL" do
      # ..existing gems

      gem 'neeto-webhooks-engine'

      # Use this for live development:
      # gem 'neeto-webhooks-engine', path: "../neeto-webhooks-nano"
   end
   ```

2. And then execute:
   ```zsh
   bundle install
   ```
3. Add this line to your application's `config/routes.rb` file:
   ```ruby
   mount NeetoWebhooksEngine::Engine, at: "/neeto_webhooks"
   ```
4. Run the following command to copy the migrations from the engine to the host
   application:
   ```zsh
   rails g neeto_webhooks_engine:install
   ```
5. Add the migrations to the database:
   ```zsh
   bundle exec rails db:migrate
   ```
6. Add the following line to application's
   config/initializer/neeto_webhooks_engine.rb file. Replace the
   event_identifiers with an array of unique keywords representing possible
   webhook events.

   ```zsh
   NeetoWebhooksEngine.event_identifiers = ["create", "update", "cancel"]
   ```

7. Add translations for the webhook events using the key format
   webhooks.events.webhook_event, where webhook_event is the custom-defined
   event_identifier.

   ```zsh
   webhooks:
     events:
       create: "Booking creation"
       update: "Booking reschedule"
       cancel: "Booking cancellation"
   ```

8. (Optional) Configure taxonomy identifiers to automatically inject taxonomy
   values into translation strings. The values can then be used in locale strings
   as interpolation variables.

   ```ruby
   NeetoWebhooksEngine.taxonomy_identifiers = {
     customer: "singular",
     teamMember: "singular"
   }
   ```

9. Add the permission `neeto_webhooks_engine.manage_webhooks` to your
   `permissions.yml` file.

### Usage

You can learn more about the setup and usage here:

1. [Models](/docs/engine/models.md)
2. [Webhook Versioning Implementation](/docs/webhook-versioning.md)

## Frontend package

### Installation

1. Install the latest `neeto-webhooks-nano` package using the below command:
   ```zsh
   yarn add @bigbinary/neeto-webhooks-frontend
   ```

### Instructions for development

Check the
[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
for step-by-step instructions to develop the frontend package.

### Components

#### `NeetoWebhooks` ([source code](https://github.com/bigbinary/neeto-webhooks-nano/blob/52aa6b3fc38dce1afb9f6a7a821f3d2d12cb6a6a/app/javascript/src/components/NeetoWebhooks.jsx))

This component is used to manage webhooks in your web application.

1. It provides a user interface for viewing, adding, and editing webhooks.
2. It also includes a user interface for listing deliveries and viewing delivery
   details, featuring tabs that display both request and response information.

##### Props

Both are required, and the component logs an error naming whichever is
missing. They fail differently, which is worth knowing when one of them is
wrong: without `entityId` the list cannot load at all, while without
`entityType` the list still renders and only creating a webhook fails.

- `entityType`: The class name of the record that owns these webhooks, and one
  of the values in `NeetoWebhooksEngine.valid_entity_types`. Usually
  `"Organization"`.
- `entityId`: The id of that record. Note that `globalProps.organization` does
  not carry an `id` in most neeto apps — it is serialized as name, subdomain,
  favicon and keys — so the host usually has to send the id through its own
  client props.

##### Optional Props

- `breadcrumbs`: An array of objects that specify breadcrumbs for navigation.
- `helpLinkUrls`: An object that specifies the URLs for the help links.
  - `webhooks`: The URL for the webhooks help link.
  - `secrets`: The URL for the secrets help link.
  - `deliveries`: The URL for the deliveries help link.

##### Usage

```jsx
import React from "react";

import { NeetoWebhooks } from "@bigbinary/neeto-webhooks-frontend";
import { routes } from "common/routes";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

const Main = () => (
  <BrowserRouter>
    <div className="flex">
      <Switch>
        <Route
          path={routes.webhooks}
          component={() => (
            <NeetoWebhooks
              entityId={entityId}
              entityType={entityType}
              breadcrumbs={[
                {
                  text: "Settings",
                  link: routes.settings,
                },
                { text: "Webhook" },
              ]}
              helpLinkUrls={{
                webhooks:
                  "https://help.neetokb.com/articles/creating-a-webhook",
                secrets:
                  "https://help.neetokb.com/articles/securing-webhook-requests",
                deliveries:
                  "https://help.neetokb.com/articles/managing-webhook-deliveries",
              }}
            />
          )}
        />
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default Main;
```

# Instructions for Publishing

Consult the
[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
guide for details on how to publish.

---
_Source: https://npm.io/package/@bigbinary/neeto-webhooks-frontend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._