Skip to main content

I created a easy to use online react bakers hydration sheet. Just enter your desired state for hydration, how many pizza of what size, I even put the poolish part in for you!

Dough Hydration Calculator

Use this calculator to determine the hydration level of your bread dough.

Advanced Pizza Dough Calculator

Results:

Total Dough Weight: 1440.00 g

Flour Needed (Final Dough): 527.59 g

Water Needed (Final Dough): 312.41 g

Poolish Flour: 300.00 g

Poolish Water: 300.00 g

Salt Amount: 28.80 g

So lets look at that code​

First we'll look at the component code:

import React, { useState } from 'react';

const AdvancedDoughCalculator: React.FC = () => {
  const [hydration, setHydration] = useState<number>(74); // Desired hydration %
  const [ballWeight, setBallWeight] = useState<number>(240); // Weight of each dough ball
  const [ballCount, setBallCount] = useState<number>(6); // Number of dough balls
  const [poolishAmount, setPoolishAmount] = useState<number>(600); // Amount of poolish
  const [poolishHydration, setPoolishHydration] = useState<number>(100); // Poolish hydration %
  const [saltPercentage, setSaltPercentage] = useState<number>(2); // Salt percentage of final dough weight

  // Calculate total dough weight
  const totalDoughWeight = ballWeight * ballCount;

  // Poolish calculations
  const flourNeededForPoolish = poolishAmount / (1 + poolishHydration / 100);
  const waterNeededForPoolish = poolishAmount - flourNeededForPoolish;

  // Final dough flour and water calculations after accounting for poolish
  const targetFlourWeight = totalDoughWeight / (1 + hydration / 100);
  const targetWaterWeight = totalDoughWeight - targetFlourWeight;
  const finalFlour = targetFlourWeight - flourNeededForPoolish;
  const finalWater = targetWaterWeight - waterNeededForPoolish;

  // Calculate salt based on final dough weight
  const saltAmount = (totalDoughWeight * saltPercentage) / 100;

  return (
    <div style={styles.container}>
      <h3 style={styles.title}>Advanced Pizza Dough Calculator</h3>

      <label style={styles.label}>
        Desired Hydration (%)
        <input
          type="number"
          value={hydration}
          onChange={(e) => setHydration(Number(e.target.value))}
          style={styles.input}
        />
      </label>

      <label style={styles.label}>
        Dough Ball Weight (g)
        <input
          type="number"
          value={ballWeight}
          onChange={(e) => setBallWeight(Number(e.target.value))}
          style={styles.input}
        />
      </label>

      <label style={styles.label}>
        Number of Dough Balls
        <input
          type="number"
          value={ballCount}
          onChange={(e) => setBallCount(Number(e.target.value))}
          style={styles.input}
        />
      </label>

      <label style={styles.label}>
        Poolish Amount (g)
        <input
          type="number"
          value={poolishAmount}
          onChange={(e) => setPoolishAmount(Number(e.target.value))}
          style={styles.input}
        />
      </label>

      <label style={styles.label}>
        Poolish Hydration (%)
        <input
          type="number"
          value={poolishHydration}
          onChange={(e) => setPoolishHydration(Number(e.target.value))}
          style={styles.input}
        />
      </label>

      <label style={styles.label}>
        Salt Percentage (% of Total Dough Weight)
        <input
          type="number"
          value={saltPercentage}
          onChange={(e) => setSaltPercentage(Number(e.target.value))}
          style={styles.input}
        />
      </label>

      <div style={styles.results}>
        <h4 style={styles.resultTitle}>Results:</h4>
        <p style={styles.resultText}>Total Dough Weight: <strong>{totalDoughWeight.toFixed(2)} g</strong></p>
        <p style={styles.resultText}>Flour Needed (Final Dough): <strong>{finalFlour.toFixed(2)} g</strong></p>
        <p style={styles.resultText}>Water Needed (Final Dough): <strong>{finalWater.toFixed(2)} g</strong></p>
        <p style={styles.resultText}>Poolish Flour: <strong>{flourNeededForPoolish.toFixed(2)} g</strong></p>
        <p style={styles.resultText}>Poolish Water: <strong>{waterNeededForPoolish.toFixed(2)} g</strong></p>
        <p style={styles.resultText}>Salt Amount: <strong>{saltAmount.toFixed(2)} g</strong></p>
      </div>
    </div>
  );
};

const styles = {
  container: {
    padding: '2rem',
    borderRadius: '12px',
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
    background: 'linear-gradient(135deg, #f8f9fa, #e9ecef)',
    fontFamily: 'Arial, sans-serif',
    maxWidth: '500px',
    margin: '0 auto',
    textAlign: 'center' as const,
  },
  title: {
    fontSize: '1.5rem',
    fontWeight: 'bold' as const,
    color: '#343a40',
    marginBottom: '1rem',
  },
  label: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    fontSize: '1rem',
    margin: '0.5rem 0',
    color: '#495057',
  },
  input: {
    marginTop: '0.3rem',
    padding: '0.5rem',
    fontSize: '1rem',
    borderRadius: '8px',
    border: '1px solid #ced4da',
    width: '100%',
    maxWidth: '200px',
    boxShadow: 'inset 0 2px 5px rgba(0, 0, 0, 0.1)',
  },
  results: {
    marginTop: '1.5rem',
    padding: '1rem',
    background: '#f1f3f5',
    borderRadius: '10px',
  },
  resultTitle: {
    fontSize: '1.25rem',
    color: '#212529',
    marginBottom: '0.5rem',
  },
  resultText: {
    fontSize: '1rem',
    color: '#495057',
  },
};

export default AdvancedDoughCalculator;

and then we use it in the .mdx file like so:

import DoughHydrationCalculator from "@site/src/components/DoughHydrationCalculator";

# Dough Hydration Calculator

Use this calculator to determine the hydration level of your bread dough.

<DoughHydrationCalculator />

Easy!

Ok, I better stop playing with React now and gt back to the day job :P