nice-react-ticker
v2.1.0
Published
Nicest react ticker in town
Downloads
628
Readme
nice-react-ticker
Nicest react ticker in town
Install
npm install --save nice-react-ticker
Demo: https://jeremyrajan.github.io/nice-react-ticker/
Usage
The library provides with 2 kinds of tickers:
- Financial Ticker: Heavily inspired from https://www.tradingview.com/
- News Ticker: Lightweight news ticker
You can refer to the demo below for the props and refer to /example
folder for implementation.
import React, { Component } from 'react'
import Ticker, { FinancialTicker, NewsTicker } from 'nice-react-ticker';
import icon from './news-icon.png'; // add images, please make sure they can be set as src
export default class App extends Component {
render() {
return (
<div>
<Ticker>
<FinancialTicker id="1" change={true} symbol="S&P 500" lastPrice="3372.2" percentage="0.38%" currentPrice="12.9" />
<FinancialTicker id="2" change={true} symbol="AAPL" lastPrice="3372.2" percentage="0.38%" currentPrice="12.9" />
<FinancialTicker id="3" change={true} symbol="GOOG" lastPrice="3372.2" percentage="0.38%" currentPrice="12.9" />
<FinancialTicker id="4" change={false} symbol="S&P 500" lastPrice="3372.2" percentage="0.38%" currentPrice="12.9" />
<FinancialTicker id="5" change={false} symbol="S&P 500" lastPrice="3372.2" percentage="0.38%" currentPrice="12.9" />
<FinancialTicker id="6" change={false} symbol="S&P 500" lastPrice="3372.2" percentage="0.38%" currentPrice="12.9" />
</Ticker>
<div className="newsticker">
<Ticker isNewsTicker={true}> {// helps with setting up animation}
<NewsTicker id="1" icon={icon} title="Blue passports to be issued to Brits for the first time in decades next month decades next month decades next month decades next month" url=" https://metro.co.uk/2020/02/22/blue-passports-issued-brits-first-time-decades-next-months-12281012/?ito=newsnow-feed" meta="11:10:20" />
<NewsTicker id="2" icon={icon} title="Blue passports to be issued to Brits for the first time in decades next month" url=" https://metro.co.uk/2020/02/22/blue-passports-issued-brits-first-time-decades-next-months-12281012/?ito=newsnow-feed" meta="11:10:20" />
<NewsTicker id="3" icon={icon} title="Blue passports to be issued to Brits for the first time in decades next month" url=" https://metro.co.uk/2020/02/22/blue-passports-issued-brits-first-time-decades-next-months-12281012/?ito=newsnow-feed" meta="11:10:20" />
<NewsTicker id="4" icon={icon} title="Blue passports to be issued to Brits for the first time in decades next month" url=" https://metro.co.uk/2020/02/22/blue-passports-issued-brits-first-time-decades-next-months-12281012/?ito=newsnow-feed" meta="11:10:20" />
<NewsTicker id="5" icon={icon} title="Blue passports to be issued to Brits for the first time in decades next month" url=" https://metro.co.uk/2020/02/22/blue-passports-issued-brits-first-time-decades-next-months-12281012/?ito=newsnow-feed" meta="11:10:20" />
<NewsTicker id="6" icon={icon} title="Blue passports to be issued to Brits for the first time in decades next month" url=" https://metro.co.uk/2020/02/22/blue-passports-issued-brits-first-time-decades-next-months-12281012/?ito=newsnow-feed" meta="11:10:20" />
</Ticker>
</div>
</div>
)
}
}
Ticker
Options
slideSpeed
: Speed in seconds for the animationisNewsTicker
: Toggle between finance and news ticker
License
MIT © jeremyrajan