Code & Live Examples

Explore ready-to-use code snippets demonstrating how to integrate @golenumber packages into React, Next.js, and Recharts applications.

1. Basic Gole Label Component

Render static Gole numbers for any decimal number using GoleLabel:

import { GoleLabel } from "@golenumber/react-gole";

export default function PriceDisplay() {
  return (
    <div>
      <h3>Item Price:</h3>
      <GoleLabel value={2048} fontSize={28} />
    </div>
  );
}

2. Interactive Gole Input Form

Allow users to type standard decimal values while displaying live Gole numbers with GoleTextBox:

import { GoleTextBox } from "@golenumber/react-gole";

export default function InvoiceForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const amount = e.target.elements.amount.value;
    alert(`Submitted amount: ${amount}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter Amount:</label>
      <GoleTextBox name="amount" defaultValue={100} placeholder="Type number..." />
      <button type="submit">Submit</button>
    </form>
  );
}

3. Recharts Integration with Gole Axes

Wrap standard Recharts axes and tooltips with @golenumber/react-recharts:

import { LineChart, Line, ResponsiveContainer } from "recharts";
import { GoleXAxis, GoleYAxis, GoleTooltip, GoleModeContainer } from "@golenumber/react-recharts";

const data = [
  { month: "Jan", sales: 1200 },
  { month: "Feb", sales: 1900 },
  { month: "Mar", sales: 2400 },
];

export default function SalesChart() {
  return (
    <GoleModeContainer defaultMode="gole">
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <GoleXAxis dataKey="month" />
          <GoleYAxis />
          <GoleTooltip />
          <Line type="monotone" dataKey="sales" stroke="#330040d4" />
        </LineChart>
      </ResponsiveContainer>
    </GoleModeContainer>
  );
}

Live Interactive Sandbox

Want to test all 7 component demos live in your browser? Visit our dedicated NPM Packages Live Demo Page!