Scrolling Features React

Easily bootstrap your landing page website or any web view that requires showing infographic displays with descriptive texts and scrolling animations.

Table of contents

• Scrolling Features React
  • Table of contents
  • Main features
  • Installation
  • Usage
  • API
    • options/props
    • Prop definitions
    • Type definitions
  • Example
  • Related packages
  • Author

Main features

• Customizable scrolling item
• Customizable fixed item
• Customizable trailing line
• Customizable indicator
• Customizable tracking line color
• Customizable tracking ball

Installation

Install the NPM package using the below script

npm install scrolling-features-react # using npm

Usage

Import the CSS file from the library to the root of your app e.g. _app.tsx for Next.JS or commonly called App.tsx for create-react-app.

import "scrolling-features-react/dist/style.css";

Import ScrollingFeatures component from the library.

import { ScrollingFeatures } from 'scrolling-features-react';
...
<ScrollingFeatures />  // See props and options in the API and example section below

Add props as needed, see API section below for more information on the types and options available.

API

options/props

Name: features

Type: Array

Required: true

Description: An array of objects that contain all features to be displayed in a scrollable container. Each object should have at least one property named scrollingItem and fixedItem, indicator is optional

Prop definitions

Props

Prop	Type	Specific	Required	Description
features	Array	AdFeature[]	true	List of items to be displayed
trackingBall	Element	ReactNode	false	The ball that follows the top of the screen
trackingLineColor	string	string	false	Highlight color of the active section
trackingLineFadeColor	string	string	false	Ideally the background color, helps add a fading effect to the beginning of the tracking line
lineTrail	Element	ReactNode	false	The center line for desktop and left line for mobile

Type definitions

Types

Property	Type	Specific
AdFeature	Object	{scrollingItem: ElementWithOptions; fixedItem: ElementWithOptions; indicator?: ElementWithOptions | undefined}
ElementWithOptions	Function	(options: FeatureItemOptions) => ReactNode;
FeatureItemOptions	Object	{isIntersecting: boolean}

Example

The below example uses tailwindcss classes to style it's custom component for the fixed and scrolling item.

SimpleExampleTextComponent

```js
  const SimpleExampleTextComponent: React.FC<{
    title: string;
    description: string;
    isIntersecting: boolean;
  }> = ({ isIntersecting, title, description }) => (
    <>
      {/* Title */}
      <h4
        className={`${
          isIntersecting ? "text-blue-600" : "text-gray-300"
        } transition duration-300 text-2xl lg:text-3xl -mt-3`}
      >
        {title}
      </h4>
      {/* Description */}
      <p
        className={`${
          isIntersecting ? "text-gray-600" : "text-gray-300"
        } transition duration-300 mt-4`}
      >
        {description}
      </p>
      {/* Link */}
      <button
        className={`${
          isIntersecting ? "text-blue-600" : "text-gray-300"
        } text-md font-medium mt-4 mb-8 lg:mb-32 lg:group-last:mb-0 transition duration-300`}
      >
        Learn more
        <span className="ml-1">&gt;</span>
      </button>
    </>
  );

```

SimpleExampleImageComponent

```js

  const SimpleExampleImageComponent: React.FC<{
    imageUrl: string;
    isIntersecting: boolean;
  }> = ({ imageUrl }) => (
    <div className="bg-gray-50 border border-gray-200 p-8 rounded-md flex justify-center items-start">
      <img className="w-48 object-contain lg:w-64" src={imageUrl} />
    </div>
  );

```

const App: React.FC = () => (
  <ScrollingFeatures
    features={[
      {
        scrollingItem: ({ isIntersecting }) => (
          <SimpleExampleImageComponent
            isIntersecting={isIntersecting}
            imageUrl="https://placehold.co/800x500"
          />
        ),
        fixedItem: ({ isIntersecting }) => (
          <SimpleExampleTextComponent
            isIntersecting={isIntersecting}
            title="Example awesome feature 1"
            description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio aperiam libero pariatur debitis rerum corporis quae iure ea id maxime velit necessitatibus reprehenderit earum, autem saepe sapiente nulla placeat sint?"
          />
        ),
      },
      {
        scrollingItem: ({ isIntersecting }) => (
          <SimpleExampleImageComponent
            isIntersecting={isIntersecting}
            imageUrl="https://placehold.co/800x500"
          />
        ),
        fixedItem: ({ isIntersecting }) => (
          <SimpleExampleTextComponent
            isIntersecting={isIntersecting}
            title="Example awesome feature 2"
            description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio aperiam libero pariatur debitis rerum corporis quae iure ea id maxime velit necessitatibus reprehenderit earum, autem saepe sapiente nulla placeat sint?"
          />
        ),
      },
    ]}
  />
);

Related packages

Scrolling Features Vue - Coming soon

Author

Precious OSSAI Website