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

| 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

| 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.

```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>
    </>
  );

```

```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