alvarlagerlof / react-haze

🌫 Easily show a fade at edges of lists to indicate scrollability

React Haze

Easily show a fade at edges of lists to indicate scrollability

Features

• Set a pixel offset for when the fade is triggerd
• Choose the fade color and size
• Works horizontally or vertially

Installation

Install with npm or yarn

npm install react-haze
yarn add react-haze

Import the Haze component

import Haze from "react-haze";

Wrap a non-scrolling container with the haze component and choose props according to your preference.

<Haze
  orientation="horizontal"
  scrollOffset={20}
  gradientSize={50}
  gradientColor="rgb(255, 254, 249)"
>
  {/* You content goes here */}
</Haze>

Demo

There is a CodeSandBox demo here

License

MIT

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Feedback

If you have any feedback, please create an issue reach me on twitter.

react-haze's Issues

Toggle haze as needed on resizing.

There's a need to recalculate whether the haze should be visible or not on resize.