A lightweight Solid component that utilizes the power of CSS animations to create silky smooth marquees.
Install it:
npm i solid-marquee
# or
yarn add solid-marquee
# or
pnpm add solid-marquee
To use the component, first import Marquee
into your file using either the default import or named import
import Marquee from "solid-marquee"
// or
import { Marquee } from "solid-marquee"
Then wrap the <Marquee>
tags around any component or text you'd like to slide.
<Marquee>
I can be a Solid component, multiple Solid components, or just some text.
</Marquee>
A sample file might look like this:
import MyComponent from "../components/MyComponent"
import Marquee from "solid-marquee"
const App = () => {
return (
<Marquee>
<MyComponent/>
<MyComponent/>
<MyComponent/>
</Marquee>
)
}
export default App
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 |