Build a React.js Lorem Ipsum Text & Avatar Image Profile Generator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

About

Lorem Ipsum Text Generator for React

React Lorem Ipsum

React Lorem Ipsum is a (TypeScript-supported) React library including components and functions to generate placeholder text.

DEMO & USAGE

When you develop a mockup page or backend API is not ready for data fetching and you have to make Frontend Development with static data until it comes, react-lorem-ipsum will create your gibberish texts for you.

In addition to Lorem Ipsum text, you can generate random avatars, names, surnames, full names and usernames to fill the fields about users randomly.

👍 React Lorem Ipsum is a zero-dependency, easy-to-use package.

NPM version NPM download Build

Table of Contents

  1. Install
  2. Demo
  3. How to Import
  4. Props
  5. Examples
  6. License
  7. Author

Install

react-lorem-ipsum

or

Demo

https://fatihtelis.github.io/react-lorem-ipsum

How to Import

Components

Functions

Props

LoremIpsum (Component), loremIpsum (function)

loremIpsum is function version of the component LoremIpsum which generates plain text instead of HTML. They both get the same props/inputs as a single object.

Name Type Default Description
p number 1 Number of paragraphs that will be generated
avgWordsPerSentence number 8 Avarage number of words created for each sentence (standard deviation is fixed ±25%)
avgSentencesPerParagraph number 8 Avarage number of sentences created for each paragraph (standard deviation is fixed ±25%)
startWithLoremIpsum bool true Start with ‘Lorem ipsum odor amet…’ to first sentence of first paragraph
random bool true If disabled always generates the same text

Note: If you use loremIpsum function to generate plain text, it will return an “Array” with length of the desired count. You can use “Array.map” or similar methods to process the data. See Examples for details.

Avatar (Component)

Name Type Default Description
gender string ‘all’ Gender for the Avatar picture. Possible values are ‘all’‘male’ and ‘female’.

Note: Avatar component returns an <img /> tag with a random image. All other props like “className, width, height, alt” etc. will directly passed to  element.

name, fullname (Functions)

Name Type Default Description
gender string ‘all’ Gender for the generated name or full name. Possible values are ‘all’‘male’ and ‘female’.

surname, username (Functions)

Props
surname and username functions does not take any inputs. They just create random surnames and usernames respectively.

Examples

LoremIpsum (Component)

Code

HTML Output

loremIpsum (Function)

Code 1

HTML Output 1

Code 2

HTML Output 2

Avatar, name, surname, fullname, username

Code 1

HTML Output 1

Code 2

HTML Output 2

Leave a Reply