!solidjs card

!NPM
!package bundle size
!package version
!npm downloads

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 React 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


Licence

MIT

Show more