react-lorem-ipsum
Advanced tools
Comparing version
@@ -70,3 +70,3 @@ "use strict"; | ||
if (sentenceLength > 6) { | ||
var hasPunctuation = Math.random() <= 0.25; | ||
var hasPunctuation = !!(Math.random() <= 0.25); | ||
@@ -87,4 +87,4 @@ if (hasPunctuation) { | ||
var random = Math.random(); | ||
if (random > 0.975) return '!'; | ||
if (random > 0.9) return '?'; | ||
if (random > 0.99) return '!'; | ||
if (random > 0.95) return '?'; | ||
return '.'; | ||
@@ -104,7 +104,6 @@ }; | ||
for (var i = 0; i < sentenceLength; i += 1) { | ||
var word = createWord(); | ||
sentence += "".concat(word).concat(midPunc.position === i ? midPunc.punctuation : '', " "); | ||
sentence += "".concat(createWord()).concat(midPunc.position === i ? midPunc.punctuation : '', " "); | ||
} | ||
sentence = "".concat(sentence.charAt(0).toUpperCase() + sentence.slice(1).toLowerCase().trim()).concat(endPunctuation()); | ||
sentence = "".concat(sentence.charAt(0).toUpperCase() + sentence.substr(1).trim()).concat(endPunctuation()); | ||
return sentence; | ||
@@ -115,3 +114,2 @@ }; | ||
var firstParagraph = _ref2.firstParagraph, | ||
type = _ref2.type, | ||
avgWordsPerSentence = _ref2.avgWordsPerSentence, | ||
@@ -121,8 +119,8 @@ avgSentencesPerParagraph = _ref2.avgSentencesPerParagraph, | ||
var aspp = (0, _utils.parseIntWithDefault)(avgSentencesPerParagraph, defaultProps.avgSentencesPerParagraph); | ||
var paragraph = ''; | ||
var swli = typeof startWithLoremIpsum === 'boolean' ? startWithLoremIpsum : defaultProps.startWithLoremIpsum; | ||
var stDev = (0, _utils.getStandardDeviation)(aspp, stDevPercentage); | ||
var paragraphLength = (0, _utils.randomPositiveFromRange)(aspp - stDev, aspp + stDev); | ||
var paragraph = ''; | ||
for (var i = 0; i < paragraphLength; i += 1) { | ||
var swli = typeof startWithLoremIpsum === 'boolean' ? startWithLoremIpsum : defaultProps.startWithLoremIpsum; | ||
var withLoremIpsum = !!(i === 0 && firstParagraph && swli); | ||
@@ -135,27 +133,5 @@ paragraph += "".concat(createSentence({ | ||
if (type === 'plain') return paragraph.trim(); | ||
return _react["default"].createElement("p", { | ||
key: paragraph | ||
}, paragraph.trim()); | ||
return paragraph.trim(); | ||
}; | ||
var LoremIpsum = function LoremIpsum(_ref3) { | ||
var p = _ref3.p, | ||
otherProps = _objectWithoutProperties(_ref3, ["p"]); | ||
var pCount = (0, _utils.parseIntWithDefault)(p, defaultProps.p); | ||
var paragraphs = []; | ||
for (var i = 0; i < pCount; i += 1) { | ||
paragraphs.push(createParagraph(_objectSpread({ | ||
firstParagraph: i === 0, | ||
type: 'html' | ||
}, otherProps))); | ||
} | ||
return paragraphs; | ||
}; | ||
exports.LoremIpsum = LoremIpsum; | ||
var loremIpsum = function loremIpsum() { | ||
@@ -172,8 +148,6 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
paragraphs.push(createParagraph(_objectSpread({ | ||
firstParagraph: i === 0, | ||
type: 'plain' | ||
firstParagraph: i === 0 | ||
}, otherProps))); | ||
} | ||
if (pCount === 1) return paragraphs[0]; | ||
return paragraphs; | ||
@@ -183,2 +157,14 @@ }; | ||
exports.loremIpsum = loremIpsum; | ||
var LoremIpsum = function LoremIpsum(props) { | ||
var paragraphs = loremIpsum(props); | ||
var html = paragraphs.map(function (paragraph) { | ||
return _react["default"].createElement("p", { | ||
key: paragraph | ||
}, paragraph); | ||
}); | ||
return html; | ||
}; | ||
exports.LoremIpsum = LoremIpsum; | ||
LoremIpsum.propTypes = { | ||
@@ -185,0 +171,0 @@ p: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]), |
{ | ||
"name": "react-lorem-ipsum", | ||
"version": "1.3.3", | ||
"version": "1.3.5", | ||
"description": "React Component for Creating Lorem Ipsum Text as Placeholder", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -33,2 +33,4 @@ # React Lorem Ipsum | ||
[](https://npmjs.org/package/react-lorem-ipsum) | ||
```bash | ||
@@ -44,4 +46,2 @@ npm install react-lorem-ipsum | ||
[](https://npmjs.org/package/react-lorem-ipsum) | ||
## Demo | ||
@@ -69,3 +69,3 @@ | ||
**loremIpsum** is function version of the component **LoremIpsum** which generates plain text instead of HTML. They both get the same props/inputs. | ||
**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. | ||
@@ -79,3 +79,3 @@ | Name | Type | Default | Description | | ||
_Note:_ If you use loremIpsum function to generate plain text, it returns a "String" if paragraph count is 1. If you give paragraph count greater than 1, 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](#examples) for details. | ||
_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](#examples) for details. | ||
@@ -165,3 +165,5 @@ #### name, fullname | ||
{loremIpsum({ p: 3 }).map(text => ( | ||
<div className="text">{text}</div> | ||
<div className="text" key={text}> | ||
{text} | ||
</div> | ||
))} | ||
@@ -168,0 +170,0 @@ </div>, |
252
0.8%281850
-0.16%211
-4.95%