SmartImageProvider and image presets reduce repeated image props in React Smart Image: put subtree-wide defaults in a provider, define reusable bundles for recurring image roles, and override either with props on an individual component. The documented precedence is Component Props → Preset → Provider Defaults → Library Defaults.
Why add providers and presets?
While working on React Smart Image, I wanted a simpler way to keep image settings consistent across a project without creating wrapper components for every use case, author Jaimin Patel explains in his first-person account.
As an Amazon Associate I earn from qualifying purchases.
Without shared configuration, image components can accumulate the same props, such as responsive, placeholder="blur", retry={2}, and transition="fade". Repeating them is manageable at first, but changing a common behavior means editing multiple call sites. Providers and presets address different parts of that problem: providers establish defaults for a subtree, while presets package settings for a recurring image role.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesHow do provider defaults work?
Wrap the part of the app where shared defaults should apply in SmartImageProvider, and pass those values through its defaults prop. SmartImage components inside the provider inherit them. Props written directly on a component take precedence over inherited defaults.
#1 Best Overall
<SmartImageProvider defaults={{ retry: 2 }}>
<App />
</SmartImageProvider>In this example, images in the wrapped subtree inherit retry: 2, unless an individual image supplies its own retry value. Provider configuration applies to its contained subtree, rather than automatically to unrelated parts of the application.
How do named presets work?
A preset is a reusable set of props for a recurring image role. Create the preset map with createImagePresets, then choose an entry by passing its name to the image’s 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,
},
});<SmartImage
preset="product"
src="/shoe.jpg"
alt="Running Shoe"
/>Here, the product image gets the reusable zoom, responsive, and blur-placeholder settings from the named preset. Its source and alternative text remain specific to that image.
Free tools Windows power users keep installed
One-click scans. No signup required.
Which wins when settings overlap?
The package documentation gives this resolution order: Component Props → Preset → Provider Defaults → Library Defaults. In other words, an explicit value on the SmartImage wins over the selected preset; the preset wins over the provider’s defaults; and library defaults apply where none of those levels supplies a value.
| Configuration level | Typical scope | Purpose | Priority |
|---|---|---|---|
| Provider defaults | Images inside a provider’s subtree | Shared baseline settings | Below presets and component props |
| Named preset | Images assigned a recurring role | Reusable group of image props | Above provider defaults, below component props |
| Component props | One SmartImage instance | Image-specific values and overrides | Highest |
A provider can also set a default preset through defaults={{ preset: "product" }}. An explicit preset prop on a SmartImage takes precedence over that provider-level choice.
How do providers and presets fit together?
Pass the preset map to the provider and set shared defaults alongside it. Then each image can select a role-specific preset while inheriting common behavior such as retries.
<SmartImageProvider defaults={{ retry: 2 }} presets={presets}>
<App />
</SmartImageProvider>With this setup, a product image can select preset="product" for zoom, responsive behavior, and a blur placeholder, while inheriting the provider’s retry setting. If a single product image needs a different value, its own props have the highest priority.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →What merging behavior should you expect?
Provider defaults are documented as a shallow, top-level merge. If a prop is an object, supplying that prop directly on an image replaces the provider’s object value as a whole; its nested fields are not merged field by field. For example, an image-level zoomOptions replaces the provider’s corresponding zoomOptions object.
Best Value
Nested providers are supported, but their configuration does not cascade by merging with the outer provider. The nearest provider’s defaults and preset map replace the outer provider’s values. When introducing a nested provider, include in it the defaults and presets needed by that subtree rather than assuming the parent’s configuration will carry through.
What happens if a preset name is unknown?
The package documentation says an unknown preset name produces a console warning and falls back to provider defaults plus component props instead of throwing an error. Check the spelling of the selected name against the keys passed to createImagePresets if the expected preset settings do not appear.
Requirements and package details
The npm package listing reports React and React DOM peer requirements of version 18 or newer. It also showed package version 2.1.2 in the listing; version and peer requirements can change, so check the current package listing and README when setting up a project.
The provider and preset APIs are configuration tools; the author’s account and package documentation do not report a benchmark or measured performance improvement. Their stated 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.
