DEV Community

Mahmudur Rahman
Mahmudur Rahman

Posted on

🚀 Introducing `react-fake-data` – Generate Realistic Fake Data for Your React Apps!

🚀 react-fake-data – Generate Realistic Fake Data for Your React Apps!

Hey Devs! 👋

Have you ever needed realistic fake data for your React project? Maybe for testing UI components, prototyping dashboards, or mock user profiles? Well, I’ve got something for you! 🔥

Introducing react-fake-data – a lightweight and powerful NPM package that helps you generate fake users, posts, and more effortlessly! 🚀


Features:

Easy-to-use hooksuseFakeUser(), useFakePosts()

Ready-to-use FakeProfile component

Zero dependencies (only faker-js)

Perfect for UI Testing & Mocking Data


📦 Installation

Get started by installing it in your React project:

npm install react-fake-data
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-fake-data
Enter fullscreen mode Exit fullscreen mode

🔥 Usage Example

🏠 1. Generate Fake User Data

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

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

  return (
    <div>
      <h1>Fake User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Location: {user.location}</p>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

🖼 2. Use the Ready-to-Go FakeProfile Component

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

const App = () => (
  <div>
    <h1>Fake Profile Component</h1>
    <FakeProfile />
  </div>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

Boom! 🎉 Now you have instant, dynamic fake data in your app!


🔗 Try It Now!

👉 NPM Package: react-fake-data

👉 GitHub: [https://github.com/mahmud-r-farhan]

🔥 Give it a ⭐ on GitHub if you find it useful!

💬 Have feedback? Let me know in the comments!


Let's Connect!

💻 Github

🐦 Twitter: [https://x.com/mahmud_r_farhan]

📧 Email: [email protected]

🚀 Happy Coding! 😊🔥


react-fake-data - npm

A simple React package to generate fake user data, posts, and profiles for testing and development.. Latest version: 1.0.0, last published: 3 months ago. Start using react-fake-data in your project by running `npm i react-fake-data`. There are no other projects in the npm registry using react-fake-data.

favicon npmjs.com

-> Follow for more!

Top comments (0)