xxxxxxxxxx npm i react-advanced-news-tickerxxxxxxxxxx <div id="nt-example1-container"> <i className="fa fa-arrow-up" id="nt-example1-prev" onClick={() => { ref.current.movePrev(); ref.current.resetInterval(); }} /> <NewsTicker ref={ref} id="nt-example1" direction={Directions.UP} rowHeight={80} maxRows={3} duration={4000}> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> </NewsTicker> <i className="fa fa-arrow-down" id="nt-example1-next" onClick={() => { ref.current.moveNext(); ref.current.resetInterval(); }} /> </div>xxxxxxxxxx <div id="nt-example2-container"> <NewsTicker ref={ref} id="nt-example2" direction={Directions.UP} rowHeight={60} maxRows={1} speed={300} duration={6000} hasMoved={() => { var index = ref.current.state.items[0].key; setCurrentItem(news[index]); }} paused={() => { document.querySelector("#nt-example2 li i").classList.remove("fa-play"); document.querySelector("#nt-example2 li i").classList.add("fa-pause"); }} unPaused={() => { document.querySelector("#nt-example2 li i").classList.remove("fa-pause"); document.querySelector("#nt-example2 li i").classList.add("fa-play"); }}> {news.map((item, i) => ( <div key={i}> <i className="fa fa-fw state fa-play" /> <span className="hour">{item.hour}</span> {item.title} </div> ))} </NewsTicker> <div id="nt-example2-infos-container"> <div id="nt-example2-infos-triangle" /> <div id="nt-example2-infos" className="row" onMouseEnter={() => ref.current.pause()} onMouseLeave={() => ref.current.unPause()}> <div className="col-4 centered"> <div className="infos-hour">{currentItem.hour}</div> <i className="fa fa-arrow-left"xxxxxxxxxx const ref = useRef(null); const [speedAdd, setSpeedAdd] = useState(1); const [speed, setSpeed] = useState(1); const [duration, setDuration] = useState(0); const [shouldStop, setShouldStop] = useState(false); const [currentState, setCurrentState] = useState(TickerStates.Stopped); const [winner, setWinner] = useState(""); const getButtonContent = () => { if (shouldStop) return ( <> <span className="ml-2">Waiting...</span> </> ); else if (winner) return ( <> <span className="ml-2">Result: {winner}</span> </> ); else if (currentState === TickerStates.Running) return ( <> <span className="ml-2">Stop</span> </> ); else return ( <> <span className="ml-2">Start</span> </> ); }; const startSpin = () => { if (currentState === TickerStates.Stopped) {xxxxxxxxxx import NewsTicker from "react-advanced-news-ticker"; // When you need, you can import enums like this: // import NewsTicker, { Directions, TickerStates } from "react-advanced-news-ticker"; xxxxxxxxxx<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>xxxxxxxxxx<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>xxxxxxxxxxconst 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>xxxxxxxxxxconst 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></>| Parameter | Usage | Type/Values | Default |
|---|---|---|---|
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 | string | '' |
id | for define id of newsTicker's ul element | string | '' |
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 | |
started | callback called on start action | function | |
stopped | callback called on stop action | function | |
paused | callback called on pause action (triggered on onMouseEnter if pauseOnHover=true) | function | |
unPaused | called on unpause action (triggered on onMouseLeave if pauseOnHover=true) | function |
xxxxxxxxxxref.current.methodName()xxxxxxxxxxref.current.stop()ref.current.start()ref.current.move()ref.current.getState()ref.current.pause()| Method | Parameter(s) | 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 mouseOver 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 |