@evergive/react-ui

A React UI component for embedding the Evergive donation widget into third-party checkout flows.

Pre-requirements

1. An SDK integration with Evergive
2. A front-end implemented in React 19+ (and ReactDOM 19+)

Installation

npm install @evergive/react-ui
# or
bun add @evergive/react-ui

Requires react and react-dom 19 or later as peer dependencies.

Usage

import { Evergive } from '@evergive/react-ui'

function CheckoutPage() {
  return (
    <Evergive
      currency="gbp"
      token="your-public-api-key"
      onChange={(amount) => console.log('Evergive amount:', amount)}
      styles={{
        colors: {
          primary: 'your-primary-colour',
          secondary: 'your-secondary-colour',
          neutral: 'your-neutral-colour',
        },
        logo: 'black'
      }}
    />
  )
}

Stylesheet

The component loads its stylesheet automatically at runtime from the Evergive CDN. No manual CSS import is required.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | token | string | Yes | Your Evergive public API key | | currency | Currency | Yes | Display currency ('gbp', 'usd', 'eur', 'cad') | | onChange | (amount: number) => void | No | Called whenever the donor changes their Evergive contribution amount | | donor | { email: string } & Record<string, unknown> | No | Optional donor metadata | | styles | {colors?: { primary?: string, neutral?: string }, logo?: 'white' \| 'black'} | No | Visual customisation - see Styles below |

Styles

| Property | Description | |----------|-------------| | colors.primary | Heading and active selection color | | colors.neutral | Border colors | | logo | Evergive logo colour — 'white' (default) or 'black' |

All colors values must be valid CSS colour strings (e.g. 'white', '#F26F1D', 'rgb(75, 71, 71)'). Invalid values are ignored and a console error is emitted.

How it works

When rendered, the widget:

1. Initialises an SDK session via the Evergive API using the provided token
2. Presents the donor with preset contribution amounts and a custom input
3. Calls onChange with the selected amount whenever it changes
4. Selecting Opt out sets the amount to 0

Building

bun run build

Outputs to dist/:

• react-evergive.min.js — minified ESM bundle
• react-evergive.min.css — minified Tailwind stylesheet
• index.d.ts — bundled TypeScript declarations