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.
<iframe
src="https://nextool.dev/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
Choose from 326+ calculators: mortgage, BMI, salary, loan, tax, investment, retirement, and more.
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.