https://github.com/andremov/react-ticker
A simple ticker made for React. Infinitely and seamlessly scroll through elements.
https://github.com/andremov/react-ticker
carousel component gallery image-gallery react ticker
Last synced: 3 months ago
JSON representation
A simple ticker made for React. Infinitely and seamlessly scroll through elements.
- Host: GitHub
- URL: https://github.com/andremov/react-ticker
- Owner: andremov
- License: mit
- Created: 2023-03-27T22:56:57.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-01T22:47:23.000Z (over 2 years ago)
- Last Synced: 2025-03-24T15:42:03.195Z (4 months ago)
- Topics: carousel, component, gallery, image-gallery, react, ticker
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@andremov/react-ticker
- Size: 102 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Ticker
A simple ticker made for `React`. Infinitely and seamlessly scroll through elements.
[![NPM Version][npm-version-image]][npm-url]
[![NPM Install Size][npm-install-size-image]][npm-install-size-url]
[![NPM Downloads][npm-downloads-image]][npm-downloads-url]
# Installation
```
npm install @andremov/react-ticker
```
## Basic Usage
```jsx
import React from 'react';
import Ticker from '@andremov/react-ticker';
function App() {
const colors = ['#632bf3', '#f122c8', '#f16022', '#9ef344', '#44d3f3'];
return (
{colors.map((item, index) => (
))}
);
}
export default App;
```
## Examples
[Live Demo](https://react-ticker-example.netlify.app/)
[example repo](https://github.com/andremov/react-ticker/tree/main/example)
## Ticker props
| props | type | default | description |
| -------- | ------ | ------- | ----------------------- |
| duration | number | 10 | duration of one segment |
## Using the Ticker example folder
```
cd example && npm install
npm run dev
```
[npm-downloads-image]: https://badgen.net/npm/dm/@andremov/react-ticker
[npm-downloads-url]: https://npmcharts.com/compare/@andremov/react-ticker?minimal=true
[npm-install-size-image]: https://badgen.net/packagephobia/install/@andremov/react-ticker
[npm-install-size-url]: https://packagephobia.com/result?p=@andremov/react-ticker
[npm-url]: https://npmjs.org/package/@andremov/react-ticker
[npm-version-image]: https://badgen.net/npm/v/@andremov/react-ticker