react-lorem-ipsum

React Lorem Ipsum

React Lorem Ipsum is a React library including Components and Functions to generate placeholder text.

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 names, surnames, full names and usernames to fill the fields about users randomly.

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

Table of Contents

• Install
• Demo
• How to Import
• Props
• Examples
• License

Install

npm install react-lorem-ipsum

or

yarn add react-lorem-ipsum

Demo

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

How to Import

Component

import LoremIpsum from 'react-lorem-ipsum';

or

import { LoremIpsum } from 'react-lorem-ipsum';

Functions

import { loremIpsum, name, surname, fullname, username } from 'react-lorem-ipsum';

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.

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

Usage of LoremIpsum vs. loremIpsum is as follows;

LoremIpsum

// Component that generates HTML
import { LoremIpsum } from 'react-lorem-ipsum';

...
<div className="wrapper">
  <LoremIpsum p={2} />
</div>,

loremIpsum

// Function that generates plain text (string)
import { loremIpsum } from 'react-lorem-ipsum';

...
<div className="wrapper">
  {loremIpsum({p: 2})}
</div>,

Note: If you use loremIpsum function to generate plain text, paragraphs will be seperated with "\n" if paragraph count is greater than 1. You have to process this plain text somehow by replacing new lines or splitting from new lines before using as HTML. There is an example about how to split plain text in the Examples section.

name, fullname

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

surname, username

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

Examples

LoremIpsum (Component)

Code

import React from 'react';
import { render } from 'react-dom';
import { LoremIpsum } from 'react-lorem-ipsum';

render(
  <div className="text-wrapper">
    <LoremIpsum p={2} />
  </div>,
  document.getElementById('root'),
);

HTML Output

<div class="text-wrapper">
  <p>
    Lorem ipsum odor amet, consectetuer adipiscing elit. Ac purus in massa egestas mollis varius;
    dignissim elementum. Mollis tincidunt mattis hendrerit dolor eros enim, nisi ligula ornare.
    Hendrerit parturient habitant pharetra rutrum gravida porttitor eros feugiat. Mollis elit
    sodales taciti duis praesent id. Consequat urna vitae morbi nunc congue. Justo molestie tellus
    adipiscing sed himenaeos primis amet quam. Rutrum magna luctus urna suspendisse bibendum elit.
  </p>
  <p>
    Non etiam tempor id arcu magna ante eget. Nec per posuere cubilia cras porttitor condimentum
    orci suscipit. Leo maecenas in tristique, himenaeos elementum placerat. Taciti rutrum nostra,
    eget cursus velit ultricies. Quam molestie tellus himenaeos cubilia congue vivamus ultricies.
    Interdum praesent ut penatibus fames eros ad consectetur sed. Posuere vehicula id integer fusce
    cursus nulla ipsum.
  </p>
</div>

loremIpsum (Function)

Code 1

import React from 'react';
import { render } from 'react-dom';
import { loremIpsum } from 'react-lorem-ipsum';

render(<div className="text-wrapper">{loremIpsum()}</div>, document.getElementById('root'));

HTML Output 1

<div class="text-wrapper">
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ac purus in massa egestas mollis varius;
  dignissim elementum. Mollis tincidunt mattis hendrerit dolor eros enim, nisi ligula ornare.
  Hendrerit parturient habitant pharetra rutrum gravida porttitor eros feugiat. Mollis elit sodales
  taciti duis praesent id. Consequat urna vitae morbi nunc congue. Justo molestie tellus adipiscing
  sed himenaeos primis amet quam. Rutrum magna luctus urna suspendisse bibendum elit.
</div>

Code 2

import React from 'react';
import { render } from 'react-dom';
import { loremIpsum } from 'react-lorem-ipsum';

// Convert lorem ipsum text string to an array by splitting from new lines.
const textArr = loremIpsum({ p: 5 }).split(/\n/);

render(
  <div className="text-wrapper">
    {textArr.map(text => (
      <>
        {text}
        <br />
        <br />
      </>
    ))}
  </div>,
  document.getElementById('root'),
);

HTML Output 2

<div class="text-wrapper">
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ac purus in massa egestas mollis varius;
  dignissim elementum. Mollis tincidunt mattis hendrerit dolor eros enim, nisi ligula ornare.
  Hendrerit parturient habitant pharetra rutrum gravida porttitor eros feugiat. Mollis elit sodales
  taciti duis praesent id. Consequat urna vitae morbi nunc congue. Justo molestie tellus adipiscing
  sed himenaeos primis amet quam. Rutrum magna luctus urna suspendisse bibendum elit.
  <br /><br />
  Non etiam tempor id arcu magna ante eget. Nec per posuere cubilia cras porttitor condimentum orci
  suscipit. Leo maecenas in tristique, himenaeos elementum placerat. Taciti rutrum nostra, eget
  cursus velit ultricies. Quam molestie tellus himenaeos cubilia congue vivamus ultricies. Interdum
  praesent ut penatibus fames eros ad consectetur sed. Posuere vehicula id integer fusce cursus
  nulla ipsum.
</div>

name, surname, fullname, username

Code 1

import React from 'react';
import { render } from 'react-dom';
import { name, surname, username } from 'react-lorem-ipsum';

render(
  <div className="user">
    <div className="name">{name('male')}</div>
    <div className="surname">{surname()}</div>
    <div className="username">{username()}</div>
  </div>,
  document.getElementById('root'),
);

HTML Output 1

<div class="user">
  <div class="name">John</div>
  <div class="surname">Smith</div>
  <div class="username">smart_guru</div>
</div>

Code 2

import React from 'react';
import { render } from 'react-dom';
import { fullname, username } from 'react-lorem-ipsum';

render(
  <div className="user">
    <div className="full-name">{fullname('female')}</div>
    <div className="username">{`@${username()}`}</div>
  </div>,
  document.getElementById('root'),
);

HTML Output 2

<div class="user">
  <div class="full-name">Jennifer S. Rose</div>
  <div class="username">@smart.fox.19</div>
</div>

License

react-lorem-ipsum is released under the MIT license.