Component Library
Pre-built React components designed to accelerate your subscription NFT integration. Copy, paste, and customize to match your brand.
Installation
pnpm add @nft-sub/components @nft-sub/sdkTypeScript support
Fully tested
Production ready
SubscriptionWidget
All-in-one subscription management component
Props
| Prop | Type | Description |
|---|---|---|
| merchantId | bigint | The merchant ID to subscribe to |
| className | string? | Optional CSS class names |
| onSuccess | (txHash: string) => void | Callback on successful subscription |
| onError | (error: Error) => void | Callback on error |
Example Usage
component.tsx
<SubscriptionWidget
merchantId={1n}
onSuccess={(txHash) => console.log('Success:', txHash)}
onError={(error) => console.error('Error:', error)}
/>PaymentForm
Flexible payment form with multiple token support
Props
| Prop | Type | Description |
|---|---|---|
| supportedTokens | string[] | Array of supported payment tokens |
| defaultToken | string | Default selected token |
| onSubmit | (token: string, amount: bigint) => void | Submit handler |
| loading | boolean? | Loading state indicator |
Example Usage
component.tsx
<PaymentForm
supportedTokens={['ETH', 'USDC', 'DAI']}
defaultToken="ETH"
onSubmit={(token, amount) => handlePayment(token, amount)}
loading={isProcessing}
/>AccessGate
Conditional rendering based on subscription status
Props
| Prop | Type | Description |
|---|---|---|
| merchantId | bigint | Merchant ID to check access for |
| children | ReactNode | Content to show when access is granted |
| fallback | ReactNode? | Content to show when access is denied |
| loading | ReactNode? | Content to show while checking access |
Example Usage
component.tsx
<AccessGate
merchantId={1n}
fallback={<SubscribePrompt />}
loading={<Spinner />}
>
<PremiumContent />
</AccessGate>StatusIndicator
Visual subscription status display
Props
| Prop | Type | Description |
|---|---|---|
| status | 'active' | 'expired' | 'none' | Current subscription status |
| expiresAt | Date? | Expiration date for active subscriptions |
| showDetails | boolean? | Show detailed information |
| compact | boolean? | Use compact display mode |
Example Usage
component.tsx
<StatusIndicator
status="active"
expiresAt={new Date('2024-12-31')}
showDetails={true}
/>Best Practices
1
Handle Loading States
Always provide visual feedback during blockchain transactions
2
Error Boundaries
Wrap components in error boundaries to gracefully handle failures
3
Optimize Re-renders
Use React.memo and useMemo for expensive computations
4
Accessibility First
Ensure all interactive elements are keyboard navigable and screen reader friendly