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

+
+ + holdPlaceholder (ms): + + +
+
+ + {realComponent} + +
+

Using ReactPlaceholder with a delay