Generate Mock Data for React Development

The Problem

React development moves fast until you need realistic data. You create a beautiful card component, but testing it with { name: "Test", price: 0 } tells you nothing about how it handles real content. Long names overflow, currency formatting breaks, and images are missing.

Most teams maintain a mockData.ts file with handcrafted objects. It works for one or two components but quickly becomes a bottleneck when the app grows.

The Solution: MockHero API

MockHero generates realistic data via API. Call it once during development, save the result, and import it into your components. Need different data? Change the schema and regenerate.

Quick Setup

curl -X POST https://api.mockhero.dev/api/v1/generate \
  -H "x-api-key: mh_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
  "tables": [
    {
      "name": "users",
      "count": 8,
      "fields": [
        { "name": "id", "type": "uuid" },
        { "name": "name", "type": "full_name" },
        { "name": "avatar", "type": "avatar_url" },
        { "name": "email", "type": "email" },
        { "name": "role", "type": "enum", "params": { "values": ["admin","editor","viewer"] } }
      ]
    }
  ],
  "format": "json"
}'

Step-by-Step Guide

1. Install dependencies

No special packages needed. If you are using Create React App, Vite, or Next.js, you already have fetch.

2. Get your MockHero API key

Sign up at mockhero.dev/sign-up. Store it in your .env file.

3. Create a mock data generator script

Create scripts/generate-mocks.mjs:

import fs from "fs";

const res = await fetch("https://api.mockhero.dev/api/v1/generate", {
  method: "POST",
  headers: {
    "x-api-key": process.env.MOCKHERO_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    tables: [
      {
        name: "users",
        count: 20,
        fields: [
          { name: "id", type: "uuid" },
          { name: "name", type: "full_name" },
          { name: "avatar", type: "avatar_url" },
          { name: "email", type: "email" },
          { name: "role", type: "enum", params: { values: ["admin","editor","viewer"] } },
        ],
      },
    ],
    format: "json",
  }),
});

const { data } = await res.json();
fs.writeFileSync("src/mocks/users.json", JSON.stringify(data.users, null, 2));
console.log("Generated", data.users.length, "mock users");

4. Run and use the data

node scripts/generate-mocks.mjs

5. Import in your components

Import the generated JSON file directly in your React components and render the data.

6. Regenerate when your schema changes

Update the field list in your script and re-run. Commit the generated JSON or add it to .gitignore depending on your workflow.

Complete Example

The generator script and component import above form the complete workflow. For dynamic data, call MockHero from a backend proxy to avoid exposing your API key in the browser.

Why MockHero vs Faker / Manual Mocks

• Zero runtime dependencies — generate once, import JSON. No Faker in your bundle.
• Consistent across the team — commit the JSON and everyone sees the same UI.
• Edge case testing — generate 100 records to catch overflow and pagination bugs.

Get Started

Free tier, no credit card. Sign up at mockhero.dev and give your React components real data.