Is there a new form of the contextualCard feature in faker.js

Question

I haven't used faker since the wipe and am not familiar with the current form of it. Is there a function similar to the contextual card function in the new version? or a function to create fake usernames? my current code looks like this

useEffect(() => {
  const suggestions = [...Array(20)].map((_, i) =>({
    ...faker.helpers.contextualCard(), 
    id:i,
  }));

  console.log(suggestions);
}, []);

Anything helps. Thanks!

Answer 1

Wow, that's from Sonny Sangha Instagram's video? I'm with the same problem here and after searching some issues in Faker Github, it looks that they turned it deprecated, so you should make your own method to get your specifics objects. I saw an example on their readme:

import { faker } from '@faker-js/faker';
// import { faker } from '@faker-js/faker/locale/de';

export const USERS: User[] = [];

export function createRandomUser(): User {
  return {
    userId: faker.datatype.uuid(),
    username: faker.internet.userName(),
    email: faker.internet.email(),
    avatar: faker.image.avatar(),
    password: faker.internet.password(),
    birthdate: faker.date.birthdate(),
    registeredAt: faker.date.past(),
  };
}

Array.from({ length: 10 }).forEach(() => {
  USERS.push(createRandomUser());
});

Answer 2

Thanks for your answer Matt! the easier operation for me was to download the older version of faker using npm install [email protected].

Answer 3

I also got stuck while doing Sonny Sangha's Instagram 2.0 video. I got a solution from this website.

This is the approach I took and it worked out for me.

export default function Stories() {
  const [suggestions, setSuggestions] = useState([]);
  useEffect(() => {
    const suggestions = [...Array(20)].map((_, i) => ({
      userId: faker.datatype.uuid(),
      username: faker.internet.userName(),
      email: faker.internet.email(),
      avatar: faker.image.avatar(),
      password: faker.internet.password(),
      birthdate: faker.date.birthdate(),
      registeredAt: faker.date.past(),
    }));
    setSuggestions(suggestions);
  }, []);
}

Answer 4

I was doing the same project recently, and used the suggestions given here. Eventually, as the faker is used in two components, I created a separate function and placed it in a new faker.js file:

import { faker } from "@faker-js/faker";

export default function createRandomUser() {
  return {
    id: faker.datatype.uuid(),
    username: faker.internet.userName(),
    avatar: faker.image.avatar(),
    company: faker.company.name(),
  };
}

This function returns an object, and an id inside, so the code in the components becomes much cleaner:

// Stories.js:

import createRandomUser from "../faker";
//...
useEffect(() => {
    const suggestions = [...Array(20)].map(() => createRandomUser());
    setSuggestions(suggestions);
}, []);

Answer 5

The old faker version that works with the Sonny Sangha Youtube content is:

npm i @faker-js/[email protected]

Answer 6

Thank you Ondairos. Same error occured here. Tried this and WORK for me!

npm i @faker-js/[email protected]

And add this to head:

import { faker } from '@faker-js/faker';