@vickjoe/react-news-ticker v1.0.7
React News Ticker
A sleek, customizable news ticker for React applications. Display news, announcements, or any other text with options for outline color, background color, auto-scroll, and much more.
Table of Contents
Installation
To install this package, run:
npm install react-news-tickerUsage
Import NewsTicker in your React component:
import NewsTicker from 'react-news-ticker';Then you can use the <NewsTicker /> component within your React components.
Props
Here are the props you can pass to the <NewsTicker /> component:
| Prop | Type | Default | Description |
|---|---|---|---|
| outlineColor | string | black | Color of the ticker's outline |
| backgroundColor | string | #333 | Background color of the ticker |
| textColor | string | #FFF | Text color of the ticker |
| xColor | string | same as textColor | Color of the 'x' close button |
| isAutoScroll | boolean | true | Whether the ticker text should auto-scroll |
| startTime | Date | null | Date and time the ticker should start displaying |
| stopTime | Date | null | Date and time the ticker should stop displaying |
| content | string | Default News Ticker Content | The text content to display in the ticker |
| scrollSpeed | string | 80s | Speed at which the ticker text should scroll |
| fontSize | string | 0.5em | Font size of the ticker text |
| fontFamily | string | 'Arial, sans-serif' | Font family of the ticker text |
Examples
Here are some example usages of the <NewsTicker /> component.
Example 1: Basic usage
import NewsTicker from 'react-news-ticker';
const App = () => {
return (
<NewsTicker content="This is some news" />
);
};Example 2: Custom Colors and Scrolling
import NewsTicker from 'react-news-ticker';
const App = () => {
return (
<NewsTicker
content="Customized news"
backgroundColor="#FFC300"
outlineColor="black"
isAutoScroll={true}
/>
);
};Contributing
To contribute to this project, please fork the repository and submit a pull request.
License
This project is licensed under the MIT License.
This README covers installation, usage, available props, and some basic examples. You can expand this with more examples, screenshots, or anything else you think would help users understand how to use your package.