DEV Community

Mahmudur Rahman
Mahmudur Rahman

Posted on

1

πŸš€ 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: 19 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!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay