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. ๐ฏ Key Modes Explained Base64 Conversion ๐ Convert images to Base64 format directly in your application. This is useful for embedding images inline or when you need to ensure that images are included with your HTML or CSS. 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> ); } CDN Optimization ๐ Leverage the ImageCDN service to optimize and deliver images efficiently. This mode is ideal for improving performance and scalability, especially when handling a large number of images. 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> ); } Text-Based Images ๐ Create dynamic images with custom text using the Statically service. This mode allows you to generate images on the fly with personalized text and styling options. 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> ); } Normal Mode (Default) ๐ Displays the image using the standard 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> ); } ๐ How to Get Started 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. ๐ Why Choose Universal Image Component? Versatility: Handles various image modes and formats. Simplicity: Easy to use with minimal configuration. Performance: Optimizes image delivery and display. Flexibility: Supports different projects, from standard React apps to Next.js applications. ๐ Try It Out Today! 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 sh20raj@gmail.com for any questions or feedback. Happy coding! ๐ 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. Universal Image Component ๐ฏ Key Modes Explained Key Modes Explained Base64 Conversion ๐ Convert images to Base64 format directly in your application. This is useful for embedding images inline or when you need to ensure that images are included with your HTML or CSS. Base64 Conversion ๐ Convert images to Base64 format directly in your application. This is useful for embedding images inline or when you need to ensure that images are included with your HTML or CSS. Base64 Conversion Sample Code: 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> ); } 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> ); } CDN Optimization ๐ Leverage the ImageCDN service to optimize and deliver images efficiently. This mode is ideal for improving performance and scalability, especially when handling a large number of images. CDN Optimization ๐ Leverage the ImageCDN service to optimize and deliver images efficiently. This mode is ideal for improving performance and scalability, especially when handling a large number of images. CDN Optimization Sample Code: 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> ); } 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> ); } Text-Based Images ๐ Create dynamic images with custom text using the Statically service. This mode allows you to generate images on the fly with personalized text and styling options. Text-Based Images ๐ Create dynamic images with custom text using the Statically service. This mode allows you to generate images on the fly with personalized text and styling options. Text-Based Images Sample Code: 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> ); } 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. 4. Next.js Optimization Image Sample Code: 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> ); } 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> ); } Normal Mode (Default) ๐ Displays the image using the standard img tag. This mode is used when no special processing is required. Normal Mode (Default) ๐ Displays the image using the standard img tag. This mode is used when no special processing is required. Normal Mode img Sample Code: 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> ); } 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> ); } ๐ How to Get Started How to Get Started Install the Package: npm install universal-img-component Install the Package: npm install universal-img-component Install the Package : Install the Package npm install universal-img-component or yarn add universal-img-component 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. Use the Component: Import and use the Img component in your React project with the mode of your choice. Use the Component : Import and use the Img component in your React project with the mode of your choice. Use the Component Img Customize as Needed: Adjust props such as mode, format, fit, text, fontsize, and others to suit your project's requirements. Customize as Needed : Adjust props such as mode , format , fit , text , fontsize , and others to suit your project's requirements. Customize as Needed mode format fit text fontsize ๐ Why Choose Universal Image Component? Why Choose Universal Image Component? Versatility: Handles various image modes and formats. Simplicity: Easy to use with minimal configuration. Performance: Optimizes image delivery and display. Flexibility: Supports different projects, from standard React apps to Next.js applications. Versatility : Handles various image modes and formats. Versatility Simplicity : Easy to use with minimal configuration. Simplicity Performance : Optimizes image delivery and display. Performance Flexibility : Supports different projects, from standard React apps to Next.js applications. Flexibility ๐ Try It Out Today! Try It Out Today! 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! Universal Image Component, GitHub repository Feel free to reach out to us at sh20raj@gmail.com for any questions or feedback. Happy coding! ๐ sh20raj@gmail.com
