@gfazioli/mantine-marquee

A Mantine component that allows you to create a marquee effect with a list of elements.

Version

v2.0.5

Source

View source code

Package

@gfazioli/mantine-marquee

Mantine Extensions

Docs

Edit this page

Built by

Giovambattista Fazioli (@gfazioli)

License

MIT

Installation

yarn add @gfazioli/mantine-marquee

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

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

You can import styles within a layer @layer mantine-marquee by importing @gfazioli/mantine-marquee/styles.layer.css file.

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

Usage

The Marquee component allows you to create a marquee effect with any content.

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #5

Hope you like it #6

Have a nice day #7

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #5

Hope you like it #6

Have a nice day #7

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #5

Hope you like it #6

Have a nice day #7

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #5

Hope you like it #6

Have a nice day #7

Reverse

Vertical

Fade edges

Pause on hover

Repeat

Duration

Gap

Fade edges size

Fade edges color

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  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>
  );
}

Multiple

The Marquee component allows you to create a marquee effect with multiple items.

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

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 w={800} mb={16} fadeEdges>
        <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>
      <Marquee reverse w={800} fadeEdges>
        <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>
    </>
  );
}

Vertical

The Marquee component allows you to create a marquee effect with multiple items in vertical direction.

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

Hello World #1

Hope you like it #2

Have a nice day #3

Goodbye #4

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

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

  return (
    <Flex w={500}>
      <Marquee h={300} fadeEdges vertical>
        <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>
      <Marquee h={300} reverse fadeEdges vertical>
        <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>
    </Flex>
  );
}

Examples

Testimonials

Your customers feedback is important to you. Use Marquee to display your testimonials.

import { Marquee } from '@gfazioli/mantine-marquee';
import { Avatar, Card, Group, Rating, Stack, Text, Title } from '@mantine/core';
import { ReactNode } from 'react';

function Demo() {
  const testimonials = [
    {
      name: 'John Doe',
      avatar:
        'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      rating: 4,
    },
    {
      name: 'Jane Doe',
      avatar:
        'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-10.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      rating: 4,
    },
    {
      name: 'Jessica Doe',
      avatar:
        'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      rating: 2,
    },
    {
      name: 'Jack Doe',
      avatar:
        'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      rating: 5,
    },
    {
      name: 'Jill Doe',
      avatar:
        'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      rating: 3,
    },
  ];

  function BoxComponent({
    children,
    avatar,
    name,
    rating,
    ...props
  }: {
    children: ReactNode;
    avatar: string;
    name: string;
    [key: string]: any;
  }) {
    return (
      <Card w={200} shadow="sm" padding="lg" radius="md" withBorder>
        <Card.Section p={'md'}>
          <Group>
            <Avatar size="md" radius="xl" src={avatar} />
            <Title order={4}>{name}</Title>
          </Group>
        </Card.Section>
        <Stack>
          <Text size="sm" c="dimmed">
            {children}
          </Text>
          <Group justify="end">
            <Rating value={rating} />
          </Group>
        </Stack>
      </Card>
    );
  }

  return (
    <Marquee w={800} pauseOnHover fadeEdges>
      {testimonials.map(({ text, ...testimonial }, index) => (
        <BoxComponent key={index} {...testimonial}>
          {text}
        </BoxComponent>
      ))}
    </Marquee>
  );
}

Branding

One of the most common use cases for Marquee is to create branding banners.

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

function Demo() {
  const iconsBrand = [
    <IconBrand4chan style={{ width: '70%', height: '70%' }} />,
    <IconBrandWhatsapp style={{ width: '70%', height: '70%' }} />,
    <IconBrandWordpress style={{ width: '70%', height: '70%' }} />,
    <IconBrandBing style={{ width: '70%', height: '70%' }} />,
    <IconBrandGithub style={{ width: '70%', height: '70%' }} />,
    <IconBrandMantine style={{ width: '70%', height: '70%' }} />,
    <IconBrandAmazon style={{ width: '70%', height: '70%' }} />,
  ];

  function BoxComponent({ children, ...props }: { children: ReactNode; [key: string]: any }) {
    return (
      <ThemeIcon {...props} variant="transparent" size={'120px'}>
        {children}
      </ThemeIcon>
    );
  }

  return (
    <Marquee w={800} pauseOnHover fadeEdges>
      {iconsBrand.map((icon, index) => (
        <BoxComponent key={index}>{icon}</BoxComponent>
      ))}
    </Marquee>
  );
}