React.js Hooks Example to Generate Fake User Data List With Images Using Faker.js Library in Browser Using TypeScript Full Project For Beginners

 

 

npm i faker

 

 

App.js

 

 

import React, { useState, useLayoutEffect } from "react";
import "./styles.css";
import faker from "faker";

export default function App() {
  const [list, setList] = useState([]);

  useLayoutEffect((_) => {
    let i = 0;
    setList([]);
    while (i < 5) {
      setList((prev) => [
        ...prev,
        {
          id: faker.random.uuid(),
          name: faker.name.firstName(),
          email: faker.internet.email(),
          img: faker.random.image()
        }
      ]);
      i++;
    }
  }, []);
  return (
    <div className="App">
      {list.map((el) => (
        <div key={el.id}>
          <span>{el.name}</span>
          <span>{el.email}</span>
          <img src={el.img} width="40px" height="40px" alt={el.name} />
          <hr />
        </div>
      ))}
      <div style={{ border: "1px solid red" }}>
        <p>{faker.lorem.paragraphs(Math.random() * 5)}</p>
      </div>
    </div>
  );
}

 

 

Leave a Reply