@masterpeach/plugin-react

Public React package for embedding Peach Plugin in npm/bundler applications.

Install

pnpm add @masterpeach/plugin-react react react-dom wagmi viem @wagmi/core @tanstack/react-query @reown/appkit @reown/appkit-adapter-wagmi

React, wagmi, viem, TanStack Query, and AppKit packages are peer dependencies and stay external in the ESM build.

Usage

import { PeachPlugin, type PeachPluginReactOptions } from "@masterpeach/plugin-react";

const options: PeachPluginReactOptions = {
  display: {
    mode: "integrated",
  },
  theme: "light",
  defaultTokens: {
    sell: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
    buy: "0x55d398326f99059fF775485246999027B3197955",
  },
};

export function SwapPanel() {
  return <PeachPlugin {...options} />;
}

Styles

The default useShadowDOM={true} mode injects plugin styles into the shadow root. If you render into the host document with useShadowDOM={false}, import the optional stylesheet:

import "@masterpeach/plugin-react/style.css";