React Lorem Ipsum

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

DEMO & USAGE

USAGE IN A LOREM IPSUM GENERATOR

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-image]][npm-url]
[![NPM download][download-image]][npm-url]
[![Build][build-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/react-lorem-ipsum.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/react-lorem-ipsum.svg?style=flat-square
[build-image]: https://img.shields.io/travis/fatihtelis/react-lorem-ipsum.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-lorem-ipsum

Table of Contents

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

Install

![react-lorem-ipsum](https://npmjs.org/package/react-lorem-ipsum)

``bash npm install react-lorem-ipsum`

or

`bash yarn add react-lorem-ipsum`

`Demo`

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

`How to Import`

#### Components

`js import { LoremIpsum, Avatar } from 'react-lorem-ipsum';`

#### Functions

`js 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 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 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`

`$3`

Code

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

render(

,
  document.getElementById('root')
);


HTML Output

`html


  
    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.
  

  
    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.


$3
Code 1

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

render(

{loremIpsum()}

, document.getElementById('root'));


HTML Output 1

`html


  Lorem ipsum odor amet, consectetuer adipiscing elit. Imperdiet erat nullam tortor quis elit lacus
  blandit vitae. Nostra dapibus bibendum; curae magnis commodo metus vestibulum tristique. Tristique
  volutpat consectetur congue lorem pharetra habitant. Sodales gravida egestas venenatis dignissim
  molestie cursus porta. Massa lacus pulvinar aliquam mi tristique.


Code 2

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

render(


    {loremIpsum({ p: 3 }).map(text => (
      
        {text}
      

    ))}

,
  document.getElementById('root')
);


HTML Output 2

`html


  
    Lorem ipsum odor amet, consectetuer adipiscing elit. Primis eros nunc fringilla id rutrum nibh.
    Orci convallis pulvinar urna fusce at purus neque nam leo? Suspendisse semper facilisi
    parturient sit euismod placerat. Orci ante luctus praesent torquent orci commodo aptent blandit.
    Placerat arcu dui potenti; nullam taciti taciti amet.
  

  
    Ridiculus proin etiam justo vivamus dignissim suscipit maecenas. Gravida ornare interdum ex dui
    eu faucibus dictum dis blandit. Rhoncus habitasse suscipit felis massa, ultrices auctor. Laoreet
    magnis justo velit vulputate iaculis at pulvinar augue. Condimentum suspendisse habitasse metus
    cubilia curabitur non sem. Primis nam in nulla phasellus bibendum pretium.
  

  
    Augue malesuada massa torquent diam tortor; porttitor dis massa. Habitasse nunc ad placerat;
    ante netus gravida a porttitor. Vel aliquet hendrerit efficitur facilisis fames lacinia porta
    per. Integer euismod aenean mi hendrerit in volutpat consequat tempus turpis. Bibendum massa ad
    tincidunt, platea montes ac arcu. Penatibus elit justo adipiscing magna vulputate leo per.


$3
Code 1

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

render(


    // All props will be directly transferred to img element
    
    {name('male')}

    {surname()}

    {username()}

,
  document.getElementById('root')
);


HTML Output 1

`html


  
  John

  Smith

  smart_guru


Code 2

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

render(


    {fullname('female')}

{@${username()}}

,
  document.getElementById('root')
);


HTML Output 2

`html


  Jennifer S. Rose

  @smart.fox.19


License

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

Author

Fatih Telis

http://fatihtelis.com

React Lorem Ipsum

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

DEMO & USAGE

USAGE IN A LOREM IPSUM GENERATOR

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-image]][npm-url]
[![NPM download][download-image]][npm-url]
[![Build][build-image]][npm-url]

Table of Contents

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

Install

![react-lorem-ipsum](https://npmjs.org/package/react-lorem-ipsum)

``bash npm install react-lorem-ipsum`

or

`bash yarn add react-lorem-ipsum`

`Demo`

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

`How to Import`

#### Components

`js import { LoremIpsum, Avatar } from 'react-lorem-ipsum';`

#### Functions

`js 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 as a single object.

#### Avatar (Component)

_Note:_ Avatar component returns an tag with a random image. All other props like "className, width, height, alt" etc. will directly passed to element.

#### name, fullname (Functions)

#### surname, username (Functions)

`Examples`

`$3`

Code

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

render(

,
  document.getElementById('root')
);


HTML Output

`html


  
    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.
  

  
    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.


$3
Code 1

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

render(

{loremIpsum()}

, document.getElementById('root'));


HTML Output 1

`html


  Lorem ipsum odor amet, consectetuer adipiscing elit. Imperdiet erat nullam tortor quis elit lacus
  blandit vitae. Nostra dapibus bibendum; curae magnis commodo metus vestibulum tristique. Tristique
  volutpat consectetur congue lorem pharetra habitant. Sodales gravida egestas venenatis dignissim
  molestie cursus porta. Massa lacus pulvinar aliquam mi tristique.


Code 2

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

render(


    {loremIpsum({ p: 3 }).map(text => (
      
        {text}
      

    ))}

,
  document.getElementById('root')
);


HTML Output 2

`html


  
    Lorem ipsum odor amet, consectetuer adipiscing elit. Primis eros nunc fringilla id rutrum nibh.
    Orci convallis pulvinar urna fusce at purus neque nam leo? Suspendisse semper facilisi
    parturient sit euismod placerat. Orci ante luctus praesent torquent orci commodo aptent blandit.
    Placerat arcu dui potenti; nullam taciti taciti amet.
  

  
    Ridiculus proin etiam justo vivamus dignissim suscipit maecenas. Gravida ornare interdum ex dui
    eu faucibus dictum dis blandit. Rhoncus habitasse suscipit felis massa, ultrices auctor. Laoreet
    magnis justo velit vulputate iaculis at pulvinar augue. Condimentum suspendisse habitasse metus
    cubilia curabitur non sem. Primis nam in nulla phasellus bibendum pretium.
  

  
    Augue malesuada massa torquent diam tortor; porttitor dis massa. Habitasse nunc ad placerat;
    ante netus gravida a porttitor. Vel aliquet hendrerit efficitur facilisis fames lacinia porta
    per. Integer euismod aenean mi hendrerit in volutpat consequat tempus turpis. Bibendum massa ad
    tincidunt, platea montes ac arcu. Penatibus elit justo adipiscing magna vulputate leo per.


$3
Code 1

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

render(


    // All props will be directly transferred to img element
    
    {name('male')}

    {surname()}

    {username()}

,
  document.getElementById('root')
);


HTML Output 1

`html


  
  John

  Smith

  smart_guru


Code 2

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

render(


    {fullname('female')}

{@${username()}}

,
  document.getElementById('root')
);


HTML Output 2

`html


  Jennifer S. Rose

  @smart.fox.19


License

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

Author

Fatih Telis

http://fatihtelis.com