@guna81/react-ticker
v3.4.1
Published
A simple and customizable react ticker (news scroller) component.
Downloads
680
Maintainers
Readme
React Ticker
A simple and customizable react ticker (news scroller) component.
Installation
Install with npm
npm install @guna81/react-ticker
Demo
Checkout the Demo.
Usage/Examples
export default function App() {
const data = [
{
id: 1,
value:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry."
},
// more data ...
];
const renderItem = (item) => {
return (
<p style={{ whiteSpace: "nowrap", color: "orange" }} >
{item.value}
</p>
);
};
return (
<div className="App">
{/* using default ticker item component */}
<ReactTicker
data={data.map((item) => item.value)}
speed={20}
keyName="_id"
tickerStyle={{
position: "fixed",
top: 0,
left: "0",
width: "100%",
height: "40px",
backgroundColor: "#fff",
zIndex: 99,
borderTop: "1px solid #e0e0e0"
}}
tickerClassName="news-ticker"
/>
{/* using custom ticker item component */}
<ReactTicker
data={data}
component={renderItem}
speed={40}
keyName="_id"
tickerStyle={{
position: "fixed",
bottom: 0,
left: "0",
width: "100%",
height: "40px",
backgroundColor: "#fff",
zIndex: 99,
borderTop: "1px solid #e0e0e0"
}}
tickerClassName="news-ticker"
/>
</div>
);
}
API Reference
Props
| Parameter | Type | Description | Default Value |
| :-------- | :------- | :---------------------- | :------------------ |
| data
| array
| Required. List of objects or strings. | empty array |
| component
| react node
| Custom ticker item component. | null |
| keyName
| string
| Key of object (Required, if only the data is a list of objects.). | null |
| speed
| number
| Scroll speed (0 - 60). | 30 |
| delay
| number
| Scroll delay. | 0 |
| diretion
| string
| Scroll direction. | normal |
| tickerClassName
| string
| Ticker container class name. | empty string |
| itemClassName
| string
| Ticker item class name. | empty string |
| tickerTextClassName
| string
| Ticker text class name (Required, if only the data is a list of strings). | empty string |
| tickerStyle
| object
| Ticker container style. | empty object |
| itemStyle
| object
| Ticker item styles. | empty object |
| loop
| boolean
| Infinite scroll. | true |
- Component and keyName props are required if data is a list of objects.
- If data is a list of strings, components, and keyName props are unnecessary.