react-fake-data

📖 React Fake Data (react-fake-data)

A lightweight React package to generate fake user data, posts, and profiles for testing and development.

📌 Features:
✅ Simple and easy-to-use hooks (useFakeUser, useFakePosts)
✅ Pre-built FakeProfile component for quick UI testing
✅ Uses faker-js/faker for realistic data generation
✅ Supports customization for different data types

---

🚀 Installation

Install via npm:

npm install react-fake-data

or yarn:

yarn add react-fake-data

---

🔥 Usage Guide

1️⃣ Generate Fake User Data (useFakeUser)

import React from "react";
import { useFakeUser } from "react-fake-data";

const UserDemo = () => {
  const user = useFakeUser();

  return (
    <div>
      <h2>Fake User</h2>
      <img src={user.avatar} alt="User Avatar" width="50" />
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
};

export default UserDemo;

🎯 Returns:

{
  id: "1a2b3c4d",
  name: "John Doe",
  email: "[e-mail]",
  avatar: "https://random-avatar.com/123",
  address: "123 Main St",
  phone: "[phone]"
}

---

2️⃣ Generate Fake Posts (useFakePosts)

import React from "react";
import { useFakePosts } from "react-fake-data";

const PostsDemo = () => {
  const posts = useFakePosts(3); // Generate 3 fake posts

  return (
    <div>
      <h2>Fake Posts</h2>
      {posts.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
          <p><strong>Author:</strong> {post.author}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsDemo;

🎯 Returns:

[
  {
    id: "a1b2c3",
    title: "How to build a React App",
    content: "This is a tutorial on building React apps...",
    author: "Alice Doe",
    date: "2024-02-11T10:30:00.000Z"
  },
  ...
]

---

3️⃣ Fake Profile Component (<FakeProfile />)

import React from "react";
import { FakeProfile } from "react-fake-data";

const ProfileDemo = () => {
  return (
    <div>
      <h2>Fake Profile</h2>
      <FakeProfile />
    </div>
  );
};

export default ProfileDemo;

🎯 Renders a pre-built profile card with fake data.

---

⚙ API Reference

🔹 useFakeUser()

📌 Returns: { id, name, email, avatar, address, phone }

🔹 useFakePosts(count = 5)

📌 Params: count (number) → Number of fake posts to generate
📌 Returns: [{ id, title, content, author, date }, ...]

🔹 <FakeProfile />

📌 Description: Pre-built component that displays a fake user profile
📌 Usage: <FakeProfile />

---