Confetti in SPFx

This article provides steps to implement Confetti in the SharePoint Framework (SPFx) web part.
This cheerful animation effect can be triggered after an event, such as form submission or success notifications.

⚙️ Install Dependencies

Install the React Confetti library:

npm install react-confetti --save

🧩 Implement the Confetti Component

Below is the complete implementation for your Confetti web part.

import * as React from 'react';
import styles from './SpfxReactConfetti.module.scss';
import { ISpfxReactConfettiProps } from './ISpfxReactConfettiProps';
import { escape } from '@microsoft/sp-lodash-subset';
import Confetti from 'react-confetti';
import { PrimaryButton, Stack, IStackTokens } from 'office-ui-fabric-react';

const stackTokens: IStackTokens = { childrenGap: 40 };

export interface ISpfxReactConfettiState {
  showConfetti: boolean;
}

export default class SpfxReactConfetti extends React.Component<ISpfxReactConfettiProps, ISpfxReactConfettiState> {
  constructor(props: ISpfxReactConfettiProps) {
    super(props);
    this.state = { showConfetti: true };
  }

  public render(): React.ReactElement<ISpfxReactConfettiProps> {
    return (
      <div className={styles.spfxReactConfetti}>
        {this.state.showConfetti && (
          <Confetti width={750} height={200} />
        )}
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
              <span className={styles.title}>Welcome to SharePoint!</span>
              <p className={styles.subTitle}>
                Customize SharePoint experiences using Web Parts.
              </p>
              <p className={styles.description}>{escape(this.props.description)}</p>
              <Stack horizontal tokens={stackTokens}>
                <a href="https://aka.ms/spfx" className={styles.button}>
                  <span className={styles.label}>Learn more</span>
                </a>
                <PrimaryButton
                  text="Stop Confetti"
                  onClick={() => this.setState({ showConfetti: false })}
                />
              </Stack>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

🚀 Build and Deploy the Solution

Run the following commands to build and deploy your solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file from the sharepoint/solution folder to your App Catalog and deploy it.
After deployment, add the web part to a modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Confetti in SPFx

GitHub

✅ Summary

This SPFx example demonstrates how to use the React Confetti component to create celebratory effects in SharePoint.
It’s a lightweight and visually appealing way to enhance user experience for success messages or completion events.