huan-qiu/react-marquee-line

A react component for running item(s) of an array automatically, infinitely within one line, with configurable gap, running speed, styles.

react-marquee-line

React Marquee Line is a react component that can be used for creating a horizontal-scrolling-board-like effect, or a vertically fade in and fade up effect.

🍾 Features

1. lower pressure on rendering engine
2. running item itself can be a React Element or a string
3. configurable running speed
4. configurable directions, vertical and horizontal

🏄🏻‍♀️Demo

coming soon... I promise.

🎢 How to use

Step 1. Installation

Using npm:

  npm install react-marquee-line

Using yarn:

  yarn add react-marquee-line

Step 2. Import Marquee

import Marquee from 'react-marquee-line';

Step 3: Pass down your list, and other config that suit your need

1. using horizontal marquee

  import Marquee from 'react-marquee-line'

  // create an react element that has onClick handler, sorry for the long name
  const someReactElemYouCanClick = <span>
      <a href="https://codesandbox.io">Click me </a> for more details
    </span>

  // set a list your want it to run
  const list = [
    'the 1st running item',
    someReactElemYouCanClick,
    'the 2rd running item'
  ]
  // pass the list to Marquee, you are good to go
  <Marquee list={list}/>

2. using vertical marquee

  import Marquee from 'react-marquee-line'

  // create an react element that has onClick handler, sorry for the long name
  const someReactElemYouCanClick = <span>
      <a href="https://codesandbox.io">Click me </a> for more details
    </span>

  // set a list your want it to run
  const list = [
    'the 1st running item',
    someReactElemYouCanClick,
    'the 2rd running item'
  ]
  // pass the list to Marquee, and set `direction`, easy-peasy
  <Marquee list={list} direction='vertical'/>

configurable properties for <Marquee />

properties name	descriptionn	type	default value	belongs to which direction
list	the list whose items you want them to run	Array	[]	both
direction	to specify which direction you want marquee to run, available values: 'horizontal', 'vertical'	String	'horizontal'	both
lines	vertical only, specify how many lines of item you want to show at one time	Number	1	vertical
gear	horizontal only, the horizontal running speed control for marquee, available values are: 1, 1.5, 2, 2.5	Number	1.5	horizontal

Want to overwrite styles of <Marquee /> ?

Good chance you need this, and you should actually, 'cause the default styles for this <Marquee /> is way too spartan. To overwrite its styles, you can simply import a .css file that has your ideal styles after the import of <Marquee />. As for the selectors specific for this <Marquee />, you can find them at the Elements Panel of dev tool; find those classname prefixed with 'react-marquee-line-'

📝TODO

1. add live demo
2. add validation for prop passed in