react-marquee-line

$3

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.

$3

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

$3

coming soon... I promise.

$3

#### Step 1. Installation

Using npm:

``bash
npm install react-marquee-line
`

Using yarn:

`bash
yarn add react-marquee-line
`

#### Step 2. Import Marquee

`javascript
import Marquee from 'react-marquee-line';
`

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

1. using horizontal marquee

`javascript
import Marquee from 'react-marquee-line'

// create an react element that has onClick handler, sorry for the long name
const someReactElemYouCanClick =
Click me for more details


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

`

2. using vertical marquee

`javascript
import Marquee from 'react-marquee-line'

// create an react element that has onClick handler, sorry for the long name
const someReactElemYouCanClick =
Click me for more details


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

`

$3

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

$3

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

$3

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

Show more