import { useState } from "react";
const sizeChart = [
{ us: "4", uk: "H", eu: "46.5", diameter: "14.8", circumference: "46.5" },
{ us: "4.5", uk: "I", eu: "47.8", diameter: "15.2", circumference: "47.8" },
{ us: "5", uk: "J", eu: "49", diameter: "15.6", circumference: "49" },
{ us: "5.5", uk: "K", eu: "50.3", diameter: "16", circumference: "50.3" },
{ us: "6", uk: "L", eu: "51.5", diameter: "16.4", circumference: "51.5" },
{ us: "6.5", uk: "M", eu: "52.8", diameter: "16.8", circumference: "52.8" },
{ us: "7", uk: "N", eu: "54", diameter: "17.2", circumference: "54" },
{ us: "7.5", uk: "O", eu: "55.3", diameter: "17.6", circumference: "55.3" },
{ us: "8", uk: "P", eu: "56.5", diameter: "18.0", circumference: "56.5" },
{ us: "8.5", uk: "Q", eu: "57.8", diameter: "18.4", circumference: "57.8" },
{ us: "9", uk: "R", eu: "59", diameter: "18.8", circumference: "59" },
{ us: "9.5", uk: "S", eu: "60.3", diameter: "19.2", circumference: "60.3" },
{ us: "10", uk: "T", eu: "61.5", diameter: "19.6", circumference: "61.5" },
];
export default function RingSizeCalculator() {
const [method, setMethod] = useState("string");
const [value, setValue] = useState("");
const [unit, setUnit] = useState("mm");
const [result, setResult] = useState(null);
const [activeTab, setActiveTab] = useState("calculator");
const [paperSize, setPaperSize] = useState(16.0);
const calculate = () => {
let mm = parseFloat(value);
if (!mm) return;
if (unit === "cm") mm = mm * 10;
if (unit === "inches") mm = mm * 25.4;
let match = null;
if (method === "string") {
// circumference
match = sizeChart.reduce((prev, curr) =>
Math.abs(parseFloat(curr.circumference) - mm) < Math.abs(parseFloat(prev.circumference) - mm) ? curr : prev
);
} else {
// diameter
match = sizeChart.reduce((prev, curr) =>
Math.abs(parseFloat(curr.diameter) - mm) < Math.abs(parseFloat(prev.diameter) - mm) ? curr : prev
);
}
setResult(match);
};
const paperResult = sizeChart.reduce((prev, curr) =>
Math.abs(parseFloat(curr.diameter) - paperSize) < Math.abs(parseFloat(prev.diameter) - paperSize) ? curr : prev
);
return (
);
}
{/* Header */}
{/* Tabs */}
{method === "string" && (
)}
{method === "diameter" && (
)}
{result && (
)}
)}
{/* Size Chart Tab */}
{activeTab === "chart" && (
)}
{/* Paper Test Tab */}
{activeTab === "paper" && (
)}
SOLITAIRE JEWELS
Ring Size Calculator
Find your perfect fit from the comfort of home
{[["calculator", "Measure Your Size"], ["chart", "Size Chart"], ["paper", "Paper Test"]].map(([id, label]) => (
))}
{/* Calculator Tab */}
{activeTab === "calculator" && (
STEP 1 — CHOOSE YOUR METHOD
How to measure:
1. Cut a thin strip of paper or string (~10cm long)
2. Wrap snugly around the base of your finger
3. Mark where the ends meet
4. Lay flat and measure the length
1. Cut a thin strip of paper or string (~10cm long)
2. Wrap snugly around the base of your finger
3. Mark where the ends meet
4. Lay flat and measure the length
How to measure:
1. Place your existing ring on a flat surface
2. Measure the inner diameter (straight across the inside)
3. Enter the measurement below
1. Place your existing ring on a flat surface
2. Measure the inner diameter (straight across the inside)
3. Enter the measurement below
STEP 2 — ENTER MEASUREMENT
setValue(e.target.value)} step="0.1" />
YOUR SIZE
{[["US/Canada", result.us], ["UK/AU", result.uk], ["EU", result.eu], ["Diameter", result.diameter + "mm"]].map(([label, val]) => (
))}
{val}
{label}
💡 Pro tip: If between sizes, we recommend going up half a size. Fingers are slightly larger in the evening and warmer months.
| US / Canada | UK / AU | EU | Diameter (mm) | Circumference (mm) |
|---|---|---|---|---|
| {row.us} | {row.uk} | {row.eu} | {row.diameter} | {row.circumference} |
Highlighted rows show your measured size. Measurements may vary slightly by ring width — for wide bands, go up half a size.
📱 Screen Test:
Print this page at 100% scale, then place a ring from your collection over the circles below to find your closest match.
Print this page at 100% scale, then place a ring from your collection over the circles below to find your closest match.
ADJUST RING SIZE
setPaperSize(parseFloat(e.target.value))} style={{ width: "100%", marginBottom: "16px" }} />
US {paperResult.us}
EU {paperResult.eu} · {paperSize}mm
Questions? Chat with our diamond consultants →
