The solid-marquee from jcanotorr06

jcanotorr06 / solid-marquee Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

CSS 12.92% TypeScript 82.26% HTML 4.81%

solid-marquee's Introduction

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

Quick start

Install it:

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

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

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