iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
React Smart Image’s SmartImageProvider and named presets let you stop repeating the same image props while keeping one-off overrides clear. Put shared behavior in provider defaults, bundle recurring image-role settings into presets, and use component props for exceptions. The documented precedence is Component Props → Preset → Provider Defaults → Library Defaults.
Why add providers and presets?
When several images need the same props—such as responsive, placeholder="blur", retry={2}, or transition="fade"—repeating them in every component is manageable at first. It becomes harder to keep behavior consistent when those settings need to change.
As I explained in my account of building the features, the goal was to share image configuration without creating wrapper components for each use case. Providers address shared defaults across a subtree; presets name reusable bundles for recurring image roles.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsHow do provider defaults work?
Wrap the part of your app that uses SmartImage in SmartImageProvider, then pass common settings in its defaults object. SmartImage components inside that provider inherit those values. A prop passed directly to an individual image takes precedence over the provider default.
#1 Best Overall
<SmartImageProvider defaults={{ retry: 2 }}>
<App />
</SmartImageProvider>This example makes retry: 2 the default for images in the wrapped subtree, while still allowing a particular image to specify its own retry value.
How do image presets work?
A preset is a reusable, named group of SmartImage props. Define the groups with createImagePresets, then select one on an image with the preset prop.
const presets = createImagePresets({
hero: {
priority: true,
responsive: true,
transition: "fade",
},
product: {
zoom: true,
responsive: true,
placeholder: "blur",
},
avatar: {
width: 60,
height: 60,
skeleton: true,
},
});Apply a bundle by name:
<SmartImage
preset="product"
src="/shoe.jpg"
alt="Running Shoe"
/>Here, the product image receives the preset’s zoom, responsive, and blur-placeholder settings. The package documentation says that an unrecognized preset name logs a console warning and falls back to provider defaults and component props; it does not throw an error.
How do providers, presets, and props combine?
The package documents this priority order: Component Props → Preset → Provider Defaults → Library Defaults. A component-level prop wins over the same setting in its preset; the preset wins over the provider default; and the library default is used when none of those levels supplies a value.
| Configuration level | Scope and purpose | Priority |
|---|---|---|
| Provider defaults | Shared settings for SmartImage components in a provider’s subtree | Lowest of the three configurable levels |
| Preset | Named bundle for a recurring image role, such as a product image | Above provider defaults |
| Component props | Settings for one image, including deliberate exceptions | Highest |
For example, the provider can establish retry behavior for the subtree while the product preset defines the usual product-image treatment. A component prop can then override either value for one image:
<SmartImageProvider defaults={{ retry: 2 }} presets={presets}>
<App />
</SmartImageProvider>A provider can also set a default preset through defaults={{ preset: "product" }}. An explicit preset prop on an individual SmartImage takes precedence over that provider-level choice.
What happens with object props and nested providers?
Provider defaults merge at the top level. If a component supplies an object prop such as zoomOptions, that object replaces the corresponding provider object as a whole; its fields are not merged individually. If you need to preserve a provider’s object settings while changing one field, include the required fields in the component’s object.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Nested providers are supported, but their configurations do not cascade by merging. The nearest provider’s defaults and preset map replace the outer provider’s corresponding values. When nesting providers, include any outer settings or presets that the inner subtree still needs.
Best Value
What do you need to use the package?
The npm package listing reports a React and React DOM peer requirement of version 18 or newer, and identifies the package as MIT-licensed. The listing showed version 2.1.2 in the snapshot consulted for this article; package versions and publication timing can change. Check the current npm listing and README for the version and API details available when installing.
The provider and preset APIs organize configuration; the cited article and package documentation do not report benchmarks or measured performance improvements. Their documented benefit is reducing repeated configuration and making shared behavior easier to update.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
