https://github.com/jeremyrajan/nice-react-ticker

Nicest react ticker in the town!
https://github.com/jeremyrajan/nice-react-ticker

financial lightweight news-ticker no-dependencies react reactjs ticker

Last synced: about 1 month ago
JSON representation

Nicest react ticker in the town!

• Host: GitHub
• URL: https://github.com/jeremyrajan/nice-react-ticker
• Owner: jeremyrajan
• Created: 2020-02-22T03:27:19.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-25T05:04:45.000Z (7 months ago)
• Last Synced: 2024-10-12T14:06:55.766Z (2 months ago)
• Topics: financial, lightweight, news-ticker, no-dependencies, react, reactjs, ticker
• Language: TypeScript
• Homepage: https://jeremyrajan.github.io/nice-react-ticker/
• Size: 9.76 MB
• Stars: 29
• Watchers: 3
• Forks: 5
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nice-react-ticker

> Nicest react ticker in town

[![NPM](https://img.shields.io/npm/v/nice-react-ticker.svg)](https://www.npmjs.com/package/nice-react-ticker) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Build Status](https://travis-ci.com/jeremyrajan/nice-react-ticker.svg?branch=master)](https://travis-ci.com/jeremyrajan/nice-react-ticker)

## Install

```bash

npm install --save nice-react-ticker

```

**Demo**: https://jeremyrajan.github.io/nice-react-ticker/

## Usage

The library provides with 2 kinds of tickers:

1. Financial Ticker: Heavily inspired from https://www.tradingview.com/

2. News Ticker: Lightweight news ticker

You can refer to the demo below for the props and refer to `/example` folder for implementation.

```tsx

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 (

      


        

          

          

          

          

          

          

        


        


           {// helps with setting up animation}

            

            

            

            

            

            

          

        

      

    )

  }

}


```

### `Ticker` Options

1. `slideSpeed`: Speed in seconds for the animation

2. `isNewsTicker`: Toggle between finance and news ticker

## License

MIT © [jeremyrajan](https://github.com/jeremyrajan)