use-webhook

A TypeScript React hook for making HTTP requests to webhook endpoints, supporting both cURL strings and standard fetch parameters.

Installation

npm install use-webhook

Usage

Basic Fetch Request

import useWebhook from 'use-webhook';

function App() {
    const { data, error, steps, loading, execute } = useWebhook({
    endpoint: 'https://api.your_webhook_url.com/webhook',
    method: 'POST',
    headers: { Authorization: 'Bearer token' },
    body: { key: 'value' },
    options: { autoExecute: true },
    });

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;

    return (
    <div>
        <button onClick={execute}>Retry</button>
        <pre>{JSON.stringify(data, null, 2)}</pre>

        {steps.length > 0 && (
        <div>
          <h3>Workflow Steps:</h3>
          {steps.map((step, index) => (
            <div key={index} className={`step ${step.status}`}>
              <strong>{step.step_name}</strong>: {step.status}
              <small> ({step.timestamp})</small>
            </div>
          ))}
        </div>
      )}
    </div>
    );
}

Using cURL String

import useWebhook from 'use-webhook';

function App() {
    const curl = `curl -X POST https://api.your_webhook_url.com/webhook \
    -H "Authorization: Bearer token" \
    -H "Content-Type: application/json" \
    --data-raw '{"key":"value"}'`;

    const { data, error, loading, execute } = useWebhook({
    curl,
    options: { autoExecute: true },
    });

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;

    return (
    <div>
        <button onClick={execute}>Retry</button>
        <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
    );
}

Parameters

• curl: (Optional) A cURL command string to parse into a fetch request.
• endpoint: (Optional) The webhook URL (ignored if curl is provided).
• method: (Optional) HTTP method (e.g., 'GET', 'POST'). Defaults to 'GET'.
• headers: (Optional) Object of HTTP headers.
• body: (Optional) Request body, as an object or string.
• options: (Optional) Additional options:
  • autoExecute: If true, the request is sent automatically on mount or when parameters change.

Returns

• data: The response data (parsed JSON).
• error: Any error message from the request.
• loading: Boolean indicating if the request is in progress.
• execute: Function to manually trigger the request.

Features

• Type-safe with TypeScript.
• Parses cURL strings into fetch-compatible requests.
• Supports standard fetch parameters (endpoint, method, headers, body).
• Automatic or manual request execution.
• Handles JSON serialization and error states.

Development

To contribute or test locally:

1. Clone the repository.
2. Run npm install.
3. Use npm run build to build the package.
4. Test with npm link and npm link use-webhook in a test project.