Mantine Marquee Component

Overview

This component is created on top of the Mantine library.

It provides the capability to generate a dynamic marquee effect, enabling the display of a wide variety of content in a visually engaging manner. This effect can enhance the overall user experience by drawing attention to important information, announcements, or promotions, allowing for a more interactive and captivating presentation.

👉 You can find more components on the Mantine Extensions Hub library.

Installation

npm install @gfazioli/mantine-marquee

or

yarn add @gfazioli/mantine-marquee

After installation import package styles at the root of your application:

import '@gfazioli/mantine-marquee/styles.css';

Usage

import { Marquee } from '@gfazioli/mantine-marquee';

function Demo() {
  function BoxComponent({ children, ...props }: { children: ReactNode; [key: string]: any }) {
    return (
      <Box {...props} p="md" w="200px" c="white" style={{ borderRadius: '8px' }}>
        {children}
      </Box>
    );
  }

  return (
    <Marquee {...props} w={560} h={300}>
      <BoxComponent bg="red">Hello World #1</BoxComponent>
      <BoxComponent bg="cyan">Hope you like it #2</BoxComponent>
      <BoxComponent bg="blue">Have a nice day #3</BoxComponent>
      <BoxComponent bg="lime">Goodbye #4</BoxComponent>
    </Marquee>
  );
}

https://github.com/user-attachments/assets/285cdda3-cd62-46a3-b028-816c34217530