diff --git a/README.md b/README.md
index 37048a3..7c7244c 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,8 @@ color: PropTypes.string,
customPlaceholder: PropTypes.oneOfType([
PropTypes.node,
PropTypes.element
- ])
+ ]),
+holdPlaceholder: PropTypes.number,
```
### Customization
@@ -79,6 +80,9 @@ You can pass an optional `delay` prop which specifies the time (in milliseconds)
Note that this delay will __not__ affect the initial render, only subsequent "ready" state changes. Setting the `firsLaunchOnly` prop to `true` will also disable this feature.
+### Hold Placeholder
+You can pass an optional `holdPlaceholder` prop which specifies the time (in milliseconds) `react-placeholder` should keep displaying the placeholder before displaying the content element even if the `ready` prop is `true`. This is useful if you want to keep displaying the placeholder for slower connections while avoiding a brief "flash" on faster connections.
+
### Animation
`react-placeholder` already comes with one default pulse animation to better tell the user that the page is loading.
The animation is defined in a separate CSS file so, in order to enable it, you should import that style in your project like this:
diff --git a/examples/examples.js b/examples/examples.js
index 0dff43e..90e5c7a 100644
--- a/examples/examples.js
+++ b/examples/examples.js
@@ -19,7 +19,8 @@ class Example extends React.Component {
readyCustom: false,
readyFirstLaunch: false,
textBlockRows: 6,
- mediaBlockRows: 4
+ mediaBlockRows: 4,
+ holdPlaceholder: 2000
};
onChange = (key) => ({ target: { value } }) => {
@@ -176,6 +177,34 @@ class Example extends React.Component {
+
Using ReactPlaceholder with a hold placeholder time
+
+
Will show the content only after specified time and it's ready