Home / Companies / Qovery / Blog / Post Details
Content Deep Dive

Adding Elegant Shadows with React to Invite Users to Scroll

Blog post from Qovery

Post Details
Company
Date Published
Author
Benjamin Debon
Word Count
423
Language
English
Hacker News Points
-
Summary

The text discusses the challenges and solutions associated with implementing a shadow effect in a React component, which involves dynamically displaying shadows at the top and bottom of a scrollable content area. Initially implemented with a suboptimal developer experience in version 2, the approach was refined in version 3 by using a WrapperComponent instead of a hook for better control over the shadow appearance. The improvements include more aesthetically pleasing shadows using the "sticky" CSS property to attach two div elements to the top and bottom of the wrapper, and an auto re-computation feature that adjusts the shadow presence as the content changes, such as during asynchronous loading or filtering. The article credits Marius Ibsen for his detection method but differentiates itself by focusing on enhancing the appearance and functionality of the shadows.