reni-sdk-react

React hooks and context provider for the Reni SDK.

Installation

    npm install reni-nodejs-sdk reni-reactjs-sdk

Setup

Wrap your app (or a section of it) with :

    import { ReniProvider } from 'reni-sdk-react';

    function App() {
    return (
        <ReniProvider token="rk_live_your_token_here">
        <EmailForm />
        </ReniProvider>
    );
    }

Hooks

useReni()

Returns the raw Reni SDK client instance.

    import { useReni } from 'reni-sdk-react';

    function MyComponent() {
    const reni = useReni();
    // reni.healthCheck(), reni.sendEmail(), etc.
    }

useHealthCheck()

    const { loading, error, data, execute, reset } = useHealthCheck();

useSendEmail()

    const { loading, error, data, execute, reset } = useSendEmail();

    // Call execute with email params:
    await execute({
    name: 'Welcome',
    to: '[email protected]',
    subject: 'Hello',
    body: '<h1>Welcome!</h1>',
    editor_type: 'html',
    sender_name: 'My App',
    });

useSendCampaign()

    const { loading, error, data, execute, reset } = useSendCampaign();

    await execute({
    name: 'Newsletter',
    listToken: ['077279133'],
    subject: 'Weekly Update',
    body: 'Hello everyone!',
    editor_type: 'text',
    });

useGetBankList()

    const { loading, error, data, execute, reset } = useGetBankList();

useAutoFetch(hookFn)

Auto-fetches data on mount. Useful for useGetBankList or useHealthCheck.

    import { useAutoFetch, useGetBankList } from 'reni-sdk-react';

    function BankList() {
    const { loading, error, data, refetch } = useAutoFetch(useGetBankList);

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

    return (
        <div>
        <button onClick={refetch}>Refresh</button>
        <ul>
            {data?.data?.map((bank) => (
            <li key={bank.bankCode}>{bank.bankName}</li>
            ))}
        </ul>
        </div>
    );
    }

Full Example

    import { ReniProvider, useSendEmail, useAutoFetch, useGetBankList } from 'reni-sdk-react';

function App() {
  return (
    <ReniProvider token="rk_live_your_token_here">
      <EmailForm />
      <BankList />
    </ReniProvider>
  );
}

function EmailForm() {
  const { loading, error, data, execute } = useSendEmail();

  const handleSubmit = async () => {
    try {
      await execute({
        name: 'Welcome',
        to: '[email protected]',
        subject: 'Welcome!',
        body: '<h1>Welcome to our app!</h1>',
        editor_type: 'html',
        sender_name: 'My App',
      });
      alert('Email sent!');
    } catch (err) {
      alert('Failed: ' + err.message);
    }
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={loading}>
        {loading ? 'Sending...' : 'Send Welcome Email'}
      </button>
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
    </div>
  );
}

function BankList() {
  const { loading, error, data, refetch } = useAutoFetch(useGetBankList);

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

  return (
    <div>
      <button onClick={refetch}>Refresh Banks</button>
      <ul>
        {data?.data?.slice(0, 10).map((bank) => (
          <li key={bank.bankCode}>{bank.bankName}</li>
        ))}
      </ul>
    </div>
  );
}

API Reference

| Hook | Description | Returns | | :--- | :--- | :--- | | useReni() | Raw SDK client | Reni instance | | useHealthCheck() | Check API health | { loading, error, data, execute, reset } | | useSendEmail() | Send an email | { loading, error, data, execute, reset } | | useSendCampaign() | Send a campaign | { loading, error, data, execute, reset } | | useGetBankList() | Get bank list | { loading, error, data, execute, reset } | | useAutoFetch(hook) | Auto-fetch on mount | { loading, error, data, refetch } |

License

MIT