Add Financial Calculators to React / Next.js
React / Next.js powers ~8% (developer frameworks) of all websites
Integrate NexTool calculators into your React or Next.js application with our lightweight component library. Type-safe, SSR-compatible, and tree-shakeable.
Step-by-Step Installation Guide
Follow these steps to add NexTool calculators to your React / Next.js site. Most users are done in under 2 minutes.
Install the Package
Install the NexTool React SDK from npm. It includes TypeScript types and supports both React and Next.js.
npm install @nextool/react
"code-comment"># or with yarn
yarn add @nextool/react
"code-comment"># or with pnpm
pnpm add @nextool/reactUse the Calculator Component
Import and use the NexToolCalculator component anywhere in your React app. Pass the calculator slug and optional configuration.
import { NexToolCalculator } from class="code-string">'@nextool/react';
export default function FinancePage() {
return (
<div className=class="code-string">"max-w-3xl mx-auto p-6">
<h1>Financial Tools</h1>
<NexToolCalculator
slug=class="code-string">"mortgage-calculator"
height={450}
theme=class="code-string">"light"
/>
</div>
);
}Configure with Provider (Optional)
Wrap your app with the NexToolProvider to set global configuration like license key, theme, and branding options.
class=class="code-string">"code-comment">// app/layout.tsx or _app.tsx
import { NexToolProvider } from class="code-string">'@nextool/react';
export default function RootLayout({ children }) {
return (
<NexToolProvider
licenseKey={process.env.NEXT_PUBLIC_NEXTOOL_KEY}
theme=class="code-string">"auto"
branding={false}
>
{children}
</NexToolProvider>
);
}Handle Events and Callbacks
Listen for calculator events like completion, errors, or resize to integrate with your app's logic.
import { NexToolCalculator } from class="code-string">'@nextool/react';
export default function InteractivePage() {
return (
<NexToolCalculator
slug=class="code-string">"compound-interest-calculator"
height={450}
onLoad={() => console.log(class="code-string">'Calculator ready')}
onResize={(height) => console.log(class="code-string">'New height:', height)}
onCalculation={(data) => {
class=class="code-string">"code-comment">// Track in your analytics
analytics.track(class="code-string">'calculation_completed', data);
}}
/>
);
}Use the Direct Iframe (Alternative)
If you prefer not to install the package, you can use a plain iframe in any React component.
export default function Calculator() {
return (
<iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/mortgage-calculator"
width=class="code-string">"100%"
height={450}
frameBorder=class="code-string">"0"
style={{ border: class="code-string">'none', borderRadius: class="code-string">'8px' }}
title=class="code-string">"Mortgage Calculator"
loading=class="code-string">"lazy"
/>
);
}Live Preview
This is how a NexTool calculator will look on your React / Next.js site.
NexTool branding is included.
<iframe
src="https://getnextool.com/embed/mortgage-calculator"
width="100%"
height="450"
frameborder="0"
title="Mortgage Calculator"
></iframe>Customization Options
Tailor the calculator to match your React / Next.js site.
Size
Set custom width and height. Default is 100% width, 450px height. The calculator is fully responsive.
Theme
Choose light or dark theme to match your site. Paid tiers support custom brand colors.
Tools
Browse the widgets page for tools available to embed. Access and usage limits depend on the selected tool.
Pricing
Get started for free. Upgrade as you grow.
Frequently Asked Questions
Common questions about using NexTool calculators with React / Next.js.
Does it work with Next.js App Router?
Yes. The NexToolCalculator component works with both the App Router and Pages Router. It renders as a client component that loads the calculator in an iframe, so it's fully compatible with server components.
Is it tree-shakeable?
Yes. The package uses ES modules, so your bundler (Webpack, Turbopack, Vite) will only include the components you actually import. The core component is under 3KB gzipped.
Can I style the calculator with my own CSS?
You can style the container and wrapper around the calculator with any CSS framework (Tailwind, styled-components, CSS Modules). The calculator content inside the iframe uses its own styles, but paid tiers support custom theme colors.
How do I pass dynamic parameters?
Use the `params` prop to pass initial values: `<NexToolCalculator slug="mortgage-calculator" params={{ amount: 300000, rate: 6.5 }} />`. The calculator will pre-fill these values on load.
Ready to Add Calculators to React / Next.js?
Start with our free tier — no credit card required. Upgrade anytime for more calculators and white-label branding.