https://github.com/gfazioli/mantine-marquee

A Mantine UI component for creating a Marquee effect with any component
https://github.com/gfazioli/mantine-marquee

mantine-ui marquee

Last synced: 1 day ago
JSON representation

A Mantine UI component for creating a Marquee effect with any component

• Host: GitHub
• URL: https://github.com/gfazioli/mantine-marquee
• Owner: gfazioli
• License: mit
• Created: 2024-06-19T11:21:23.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-29T15:35:55.000Z (4 days ago)
• Last Synced: 2024-09-29T15:40:09.322Z (4 days ago)
• Topics: mantine-ui, marquee
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-marquee/
• Size: 3.03 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Mantine Marquee Component



  



---



  

    

  

  

  

    

  

  









## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.

It allows to create a marquee effect with any content.

You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.

## Installation

```sh

npm install @gfazioli/mantine-marquee

```

or 

```sh

yarn add @gfazioli/mantine-marquee

```

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

```tsx

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

```

## Usage

```tsx

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

function Demo() {

  function BoxComponent({ children, ...props }: { children: ReactNode; [key: string]: any }) {

    return (

      

        {children}

      

    );

  }

  return (

    

      Hello World #1

      Hope you like it #2

      Have a nice day #3

      Goodbye #4

    

  );

}

```