react-random
React component for rendering random / fake data.
Often times we encounter the situation in our projects when we don't have any backend ready yet and we have to mock some random data in
our templates. That's why I've decided to create a simple React wrapper around Faker.js library called
react-random
that solves our problem.
Installation
Execute this line in your app directory:
npm install --save react-random
Import component into your app:
;
Usage
This is the simplest possible usage of the component:
;;; { return <Random value='name.firstName' />; }; ;
This simple piece of code will fetch value
prop and divide it into category = name
and property = firstName
and according to
Faker.js documentation it will render faker.name.firstName()
value within <span>...</span>
tag by default.
You can also specify tag
, className
or locale
of the component:
{ return <Random value='name.lastName' tag='h1' className='cool-component__random-name' locale='ru' />; };
When it comes to random links you can handle them this way:
{ return <Random value='image.cats' tag='a'> Click Here! </Random> ; };
and it evaluates to:
Click Here!
At the end you can display also random images:
{ return <Random value='image.animals' tag='img' /> ; };
and it gives you: