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 hooks – useFakeUser(), 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: dev@devplus.fun

πŸš€ 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: 6 days 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)