Easily show a fade at edges of lists to indicate scrollability

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

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>

There is a CodeSandBox demo here

MIT

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

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