https://github.com/jcanotorr06/solid-marquee

A lightweight Solid component that utilizes the power of CSS animations to create silky smooth marquees.
https://github.com/jcanotorr06/solid-marquee

animation component css javascript js jsx marquee package solid solid-js solidjs ts tsx typescript

Last synced: 3 months ago
JSON representation

A lightweight Solid component that utilizes the power of CSS animations to create silky smooth marquees.

• Host: GitHub
• URL: https://github.com/jcanotorr06/solid-marquee
• Owner: Jcanotorr06
• License: mit
• Created: 2023-02-26T20:20:27.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-27T00:41:29.000Z (almost 3 years ago)
• Last Synced: 2025-10-12T11:46:46.726Z (3 months ago)
• Topics: animation, component, css, javascript, js, jsx, marquee, package, solid, solid-js, solidjs, ts, tsx, typescript
• Language: TypeScript
• Homepage:
• Size: 72.3 KB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![solidjs card](https://assets.solidjs.com/banner?type=solid-marquee&background=tiles&project=%20)

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)

![NPM](https://img.shields.io/npm/l/solid-marquee?style=for-the-badge)

![package bundle size](https://img.shields.io/bundlephobia/minzip/solid-marquee?label=Size&style=for-the-badge)

![package version](https://img.shields.io/npm/v/solid-marquee?label=version&style=for-the-badge)

![npm downloads](https://img.shields.io/npm/dw/solid-marquee?style=for-the-badge)

A lightweight Solid component that utilizes the power of CSS animations to create silky smooth marquees. 

## Quick start

Install it:

```bash

npm i solid-marquee

# or

yarn add solid-marquee

# or

pnpm add solid-marquee

```

## Usage

To use the component, first import `Marquee` into your file using either the default import or named import

```tsx

import Marquee from "solid-marquee"

// or

import { Marquee } from "solid-marquee"

```

Then wrap the `` tags around any component or text you'd like to slide.

```tsx

  I can be a Solid component, multiple Solid components, or just some text.

```

A sample file might look like this:

```tsx

import MyComponent from "../components/MyComponent"

import Marquee from "solid-marquee"

const App = () => {

  return (

    

      

      

      

    

  )

}

export default App

```

## Props

| Property        | Type                        | Default           | Description                                              |

| :-------------- | :-------------------------- | :---------------- | :------------------------------------------------------- |

| `style`         | `object`                    | `{}`              | Inline style for the container div                       |

| `className`     | `string`                    | `""`              | Name of the css class to style the container div         |

| `play`          | `boolean`                   | `true`            | Whether to play or pause the marquee                     |

| `pauseOnHover`  | `boolean`                   | `false`           | Whether to pause the marquee when hovered                |

| `pauseOnClick`  | `boolean`                   | `false`           | Whether to pause the marquee when clicked                |

| `direction`     | `"left"` or `"right"`       | `"left"`          | The direction the marquee is sliding                     |

| `speed`         | `number`                    | `20`              | Speed calculated as pixels/second                        |

| `delay`         | `number`                    | `0`               | Duration to delay the animation after render, in seconds |

| `iterations`          | `number`                    | `0`               | The number of times the marquee should loop, 0 is equivalent to infinite         |

| `onFinish` | `Function` | `null` | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.    |

| `onCycleComplete` | `Function`        | `null`             | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).                 |

| `children`      | `ReactNode`                 | `null`            | The children rendered inside the marquee                 |

## Contributors

[![contributors](https://contrib.rocks/image?repo=jcanotorr06/solid-marquee)](https://github.com/jcanotorr06/solid-marquee/graphs/contributors)

## Licence

[MIT](LICENSE)