https://github.com/plemarquand/react-text-cycle
React component for cycling between text headings.
https://github.com/plemarquand/react-text-cycle
animated-elements animation carousel carousel-component react react-component
Last synced: 5 months ago
JSON representation
React component for cycling between text headings.
- Host: GitHub
- URL: https://github.com/plemarquand/react-text-cycle
- Owner: plemarquand
- Created: 2017-02-07T20:42:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-07T23:16:20.000Z (over 9 years ago)
- Last Synced: 2025-10-28T13:56:49.089Z (8 months ago)
- Topics: animated-elements, animation, carousel, carousel-component, react, react-component
- Language: JavaScript
- Size: 968 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Text Cycle
React component for cycling between text headings.
## Install
`npm install react-text-cycle --save`
## Usage
```jsx
const items = ['Friends', 'Family', 'Strangers', 'Weird Uncles']; // Required
const duration = 3000; // The time to wait before rendering the next string
```
## API
#### `items` - Array (required)
An array of React nodes. The array should contain more than one element. If it contains only one, no animation occurs. If it contains none, the component will not appear.
#### `duration` - Number (optional, default = 3000)
Time in between titles, in milliseconds. This does not include the duration of the animations.
#### `className` - String (optional)
Class name transferred to the top level element in the component. Use this for styling the text.
#### `bgClassName` - String (optional)
Class name for the background element that sits behind the text.
#### animationStates - Object (optional)
Allows for customization of the in and out animations.
* `inStart` String - class name for the initial state of the animation. This class should not have a `transition` property defined.
* `in`: String - class name for final state of the in animation. This class *should* have a `transition` property defined.
* `outStart`: String - class name for the final out state of the animation. This class should not have a `transition` property defined.
* `out`: String - class name for final state of the out animation. This class *should* have a `transition` property defined.