r3pCalc

Beautiful plug-and-play calculator component for React and Next.js projects. No Tailwind or global styles required—just import and start calculating.

Features

• Sleek dark-mode UI inspired by Tailwind aesthetics (pure CSS)
• Responsive grid layout with smooth button interactions
• Safe math parser (shunting-yard) — no eval
• Includes basic operators, percentage, decimal, equals, and clear actions
• Styles load automatically when you import the component

Installation

npm install r3pcalc
# or
yarn add r3pcalc

Note: npm requires lowercase package names, so the published package is r3pcalc even though the component branding remains “r3pCalc”.

Usage

import React from "react";
import R3pCalculator from "r3pcalc";

export default function App() {
  return (
    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center" }}>
      <R3pCalculator />
    </div>
  );
}

Next.js example

import R3pCalculator from "r3pcalc";

export default function Page() {
  return (
    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center" }}>
      <R3pCalculator />
    </main>
  );
}

Scripts

• npm run build – placeholder (package ships as-is, ready to publish)

License

MIT © MasteryMadeAI