DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

alireza valizade
alireza valizade

Posted on • Originally published at Medium on

Rendering images smoothly using React Hooks

simple hook to render images smoothly.

In this article I’m going to create very simple Hook to render images smoothly on the screen (Not really rendering but sort of trick).

  1. Create a file β€œuseImage.js” and wrap it with β€œHooks” directory with these contents:

This is very basic hook you can add your own stuff, it depends on your needs, like handling errors or whatever which is related to image.

  1. Let’s add some styles to handle the transitions:

  1. I’m going to create a β€œCover” component to reuse it everywhere.

Let’s see the result.

Demo Time

Check it out on Sandbox

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.