SharePoint  

Create a React Marquee in SPFx

Summary

In this article, we’ll build a simple scrolling marquee (moving text/announcements) using React inside a SharePoint Framework (SPFx) web part. You’ll learn how to set up the component, add customization options, and integrate it cleanly into a SharePoint page.

Why a marquee in SPFx?

Many organizations use SharePoint as their intranet or collaboration hub. A marquee is a neat way to display:

  • Announcements

  • Event reminders

  • News headlines

  • Scrolling ticker messages

Instead of relying on outdated <marquee> HTML (deprecated), we’ll build a React component that is modern, flexible, and works in SPFx.

Step 1. SPFx project setup

Run the Yeoman generator to create a React-based SPFx web part:

yo @microsoft/sharepoint

  • Framework: React

  • Web part name: ReactMarquee

  • Target: SharePoint Online only

This scaffolds the solution with React support.

Step 2. Install a marquee library (optional)

You can either build the animation with CSS keyframes or use a React package like react-fast-marquee.

Install it:

npm install react-fast-marquee

Step 3. Create the Marquee component

Inside your web part’s components folder, create MarqueeComponent.tsx:

import * as React from "react";
import Marquee from "react-fast-marquee";
import { Text } from "@fluentui/react";

export interface IMarqueeProps {
  text: string;
  speed?: number;
  pauseOnHover?: boolean;
}

export const MarqueeComponent: React.FC<IMarqueeProps> = ({
  text,
  speed = 50,
  pauseOnHover = true,
}) => {
  return (
    <Marquee gradient={false} speed={speed} pauseOnHover={pauseOnHover}>
      <Text variant="large" style={{ paddingRight: 32 }}>
        {text}
      </Text>
    </Marquee>
  );
};

Key points

  • react-fast-marquee handles smooth scrolling.

  • speed and pauseOnHover are configurable.

  • Text from Fluent UI ensures SharePoint look-and-feel.

Step 4. Integrate into the SPFx web part

In your ReactMarquee.tsx (main component):

import * as React from "react";
import { MarqueeComponent } from "./MarqueeComponent";

export interface IReactMarqueeProps {
  announcement: string;
}

export default function ReactMarquee(props: IReactMarqueeProps) {
  return (
    <div style={{ background: "#f3f2f1", padding: "10px" }}>
      <MarqueeComponent text={props.announcement} speed={40} />
    </div>
  );
}

Step 5. Add property pane support

In ReactMarqueeWebPart.ts you can allow authors to configure the announcement text from the property pane:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: { description: "Marquee Settings" },
        groups: [
          {
            groupName: "Content",
            groupFields: [
              PropertyPaneTextField("announcement", {
                label: "Announcement Text",
                multiline: true,
              }),
            ],
          },
        ],
      },
    ],
  };
}

Now, content authors can edit the message directly in the page editor.

Step 6. Deploy and test

  1. Run the local workbench:

    gulp serve

  2. Add the web part and type in a message like “Welcome to our intranet! Don’t miss the townhall meeting this Friday.”

  3. Deploy the package (gulp bundle --ship && gulp package-solution --ship) to your App Catalog and add it to your site collection.

Advanced Enhancements

  • Direction: support left → right or right → left.

  • Multiple messages: pass in an array and cycle through them.

  • Styling: brand the marquee with theme colors.

  • Accessibility: ensure ARIA roles and pause controls for screen readers.

Conclusion

Using React inside SPFx, you can create a modern, accessible marquee that replaces the old <marquee> tag. With react-fast-marquee (or CSS keyframes), You get smooth scrolling text that fits perfectly into your SharePoint Online environment.

Membership not found