Overview:

LogoReact Haze is a React component that allows users to easily show a fade at the edges of lists to indicate scrollability. This component can be installed with npm or yarn and offers various features such as setting a pixel offset for when the fade is triggered, choosing the fade color and size, and working horizontally or vertically.

Features:

• Fade Trigger Offset: Set a pixel offset for when the fade is triggered.
• Customizable Fade: Choose the fade color and size according to your preference.
• Horizontal and Vertical Compatibility: Works seamlessly in both horizontal and vertical orientations.

Installation:

To install LogoReact Haze, follow these steps:

1. Make sure you have npm or yarn installed on your machine.

2. Open your terminal and navigate to your project directory.

3. Run the following command to install LogoReact Haze using npm:

   npm install logoreact-haze
   

   or, if you prefer using yarn, run:

   yarn add logoreact-haze
   

4. Import the Haze component into your project:

   import Haze from 'logoreact-haze';
   

5. To use the Haze component, wrap a non-scrolling container with it and choose props according to your preference:

   <Haze fadeColor="#000" fadeSize={20} fadeOffset={50}>
     {/* Your content goes here */}
   </Haze>
   

   In the example above, the fadeColor prop is set to black (#000), the fadeSize prop is set to 20 pixels, and the fadeOffset prop is set to 50 pixels.

Summary:

LogoReact Haze is a versatile React component that adds a fade effect to indicate scrollability in lists. With its customizable features, such as fade trigger offset, fade color, and fade size, users can easily integrate Haze into their React projects. Whether it’s a horizontal or vertical list, LogoReact Haze provides a seamless solution for enhancing user experience.