Are you looking for a flexible solution to handle images in your React projects? Universal Image Component is here to simplify your image management, offering a range of modes to suit your needs. From Base64 conversion to CDN optimization and more, this library is designed to make working with images effortless.
Sample Code:
import Img from 'universal-img-component';
function App() {
return (
<div>
<h2>Base64 Mode</h2>
<Img
src="https://via.placeholder.com/150"
alt="placeholder"
mode="base64"
width="300px"
height="300px"
/>
</div>
);
}
Sample Code:
import Img from 'universal-img-component';
function App() {
return (
<div>
<h2>CDN Mode</h2>
<Img
src="https://via.placeholder.com/150"
alt="placeholder"
mode="cdn"
width="300px"
height="300px"
/>
</div>
);
}
Sample Code:
import Img from 'universal-img-component';
function App() {
return (
<div>
<h2>Text-Based Image Mode</h2>
<Img
text="Hello World"
mode="textbase"
fontsize="40px"
width="300px"
height="150px"
/>
</div>
);
}
4. Next.js Optimization 🚀 For Next.js projects, this mode uses the built-in Image
component from Next.js for optimized image loading and performance.
Sample Code:
import Img from 'universal-img-component';
function App() {
return (
<div>
<h2>Next.js Mode</h2>
<Img
src="https://via.placeholder.com/150"
alt="placeholder"
mode="next"
width="300px"
height="300px"
/>
</div>
);
}
img
tag. This mode is used when no special processing is required.Sample Code:
import Img from 'universal-img-component';
function App() {
return (
<div>
<h2>Normal Mode</h2>
<Img
src="https://via.placeholder.com/150"
alt="placeholder"
mode="normal"
width="300px"
height="300px"
/>
</div>
);
}
Install the Package:
npm install universal-img-component
or
yarn add universal-img-component
Enter fullscreen mode Exit fullscreen mode
Use the Component: Import and use the Img
component in your React project with the mode of your choice.
Customize as Needed: Adjust props such as mode
, format
, fit
, text
, fontsize
, and others to suit your project's requirements.
Upgrade your image handling with Universal Image Component, and experience a new level of ease and efficiency. Check out our GitHub repository for more details, documentation, and to contribute!
Feel free to reach out to us at [email protected] for any questions or feedback. Happy coding! 🚀