scrolling-features-react
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Scrolling Features React

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

Preview

Table of contents

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

Package Sidebar

Install

npm i scrolling-features-react

Weekly Downloads

9

Version

1.1.0

License

MIT

Unpacked Size

1.1 MB

Total Files

14

Last publish

Collaborators

  • pecrio