withLazyDependencies
is a React higher-order-component that wraps a
component and, when mounted, automatically loads script and style
dependencies before the mounting the wrapped component.
A script or style dependency is one that has been registered using
wp_register_script
or wp_register_style
. It is identified by a unique
string handle.
Use the scripts
attribute to specify which registered scripts should be
loaded before the wrapped component is mounted:
function OriginalComponent() {
return <p>jQuery version: { jQuery.fn.jquery }</p>;
}
const EnhancedComponent = withLazyDependencies( {
scripts: [ 'jquery' ],
} )( OriginalComponent );
Use styles
to specify which registered styles should be loaded:
const EnhancedComponent = withLazyDependencies( {
styles: [ 'style1', 'style2' ],
} )( OriginalComponent );
To dynamically specify which dependencies to load, a function can be given to
scripts
or styles
:
const EnhancedComponent = withLazyDependencies( {
scripts() {
return [ 'jquery' ];
},
} )( OriginalComponent );
Use loadingComponent
and errorComponent
to specify what should be
displayed when the dependencies are loading or have failed to load:
const EnhancedComponent = withLazyDependencies( {
scripts: [ 'jquery' ],
lodingComponent() {
return <p>Loading jQuery...</p>;
},
errorComponent() {
return <p>Error while loading jQuery!</p>;
},
} )( OriginalComponent );