React-advanced-news-ticker NPM

alt text

A powerful, flexible and animated vertical news ticker plugin for React. React Advanced News Ticker provides multiple callbacks and methods to allow a maximum flexibility and an easy implementation into any project.

🏠 Demo

⚡️ Quickstart

<NewsTicker>
  <div>Etiam imperdiet volutpat libero eu tristique.</div>
  <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
  <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
  <div>Nunc ultrices tortor eu massa placerat posuere.</div>
</NewsTicker>

⚙️ Installation

npm i react-advanced-news-ticker

👀 Examples

📖 With Custom Props

<NewsTicker
    rowHeight = {48}
    maxRows = {2}
    speed = {600}
    direction = {Directions.UP}
    duration = {4000}
    autoStart = {true}
    pauseOnHover = {false}
    id = "myId"
    className = "myClassName1 myClassName2"
    style = {{marginTop: 34}}>
    <div>Etiam imperdiet volutpat libero eu tristique.</div>
    <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
    <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
    <div>Nunc ultrices tortor eu massa placerat posuere.</div>
</NewsTicker>

📖 With Callbacks

const updateInfos = () => {
  ...
}

return <NewsTicker
    maxRows = {1}
    duration = {6000}
    hasMoved = {updateInfos}
    started = {()=>{
      console.log('react advanced news ticker just started!');
    }}
    paused = {()=>{
      console.log('react advanced news ticker has been paused.');
    }}>
    <div>Etiam imperdiet volutpat libero eu tristique.</div>
    <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
    <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
    <div>Nunc ultrices tortor eu massa placerat posuere.</div>
</NewsTicker>

📖 With Methods

const newsTickerRef = useRef(null);
return <>
  <NewsTicker
      ref = {newsTickerRef}
      autoStart = {false}
      speed = {400}>
      <div>Etiam imperdiet volutpat libero eu tristique.</div>
      <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
      <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
      <div>Nunc ultrices tortor eu massa placerat posuere.</div>
  </NewsTicker>

  <button
    onClick={() => { newsTickerRef.current.start() }}>
    Start
  </button>

  <div
    onMouseEnter={() => newsTickerRef.current.pause()}
    onMouseLeave={() => newsTickerRef.current.unPause()}>
     Pause
  </div>
</>

📇 Props

Prop	Usage	Type/Values	Default value
`rowHeight`	defines the height (in px) of one row	`int`	22
`maxRows`	defines the number of rows displayed at the same time	`int`	3
`speed`	defines the animation speed (in ms)of the rows moving up or down	`int` (in ms)	400
`duration`	defines the times (in ms) before the rows automatically move	`int` (in ms)	2500
`direction`	defines the direction of the rows movement	`Directions.UP` or `Directions.DOWN`	Directions.UP
`autoStart`	enable/disable auto start on load	`bool`	true
`pauseOnHover`	enable/disable pause when mouse hovers the newsTicker element	`bool`	true
`className`	for define className of newsTicker's ul element	`bool`	true
`id`	for define id of newsTicker's ul element	`bool`	""
`style`	for styling newsTicker's ul element	`object`	{}
`hasMoved`	`callback` called at the end of every movement animation	`function`
`movingUp`	`callback` called before launching `moving up` action	`function`
`movingDown`	`callback` called before launching `moving down` action	`function`
`start`	`callback` called on `start` action	`function`
`stop`	`callback` called on `stop` action	`function`
`pause`	`callback` called on `pause` action (triggered on `onMouseEnter` if `pauseOnHover=true`)	`function`
`unpause`	called on `unpause` action (triggered on `onMouseLeave` if `pauseOnHover=true`)	`function`

📇 Methods

After creating NewsTicker component with ref, methods are called with ref.current.methodName()

Example :

ref.current.stop();
ref.current.start();
ref.current.move();
ref.current.getState();
ref.current.pause();

📜 Method List

Method	Action
`start`	starts moving newsTicker elements
`stop`	stops moving newsTicker elements
`getState`	returns current state: `TickerStates.Stopped` = stopped, `TickerStates.Running` = started, `TickerStates.Paused` = paused (and started)
`pause`	pauses newsTicker elements without stopping them - the newsTicker has to be started to be able to pause it (the `pause` method is called on `onMouseEnter` if `pauseOnHover` = true)
`unpause`	unpauses newsTicker elements - the newsTicker has to be started & paused to be able to unpause it (the `unpause` method is called on `onMouseLeave` if `pauseOnHover` = true)
`moveDown`	moves elements down
`moveUp`	moves elements up
`moveNext`	moves up or down according to the current `direction` option
`movePrev`	moves up or down according to the current `direction` option
`move`	equivalent to `moveNext`, but will not move if `paused`

Author

👤 Ahmet Can Aydemir

Website: https://www.ahmetcanaydemir.com
Twitter: @ahmetcnaydemir
Github: @ahmetcanaydemir
LinkedIn: @ahmetcanaydemir

👍 Contribute

Contributions, issues and feature requests are welcome!Feel free to check issues page.

📝 License

This project based on risq's JQuery Advanced News Ticker. This project is GPL-2.0 licensed.

prop-types react

@infinitebrahmanuniverse/nolb-react-ad @everything-registry/sub-chunk-2538

1.0.1

3 years ago

1.0.0

4 years ago