React component for cycling between text headings.
npm install react-text-cycle --save
const items = ['Friends', 'Family', 'Strangers', 'Weird Uncles']; // Required
const duration = 3000; // The time to wait before rendering the next string
<TextCycle items={items} duration={duration} />
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.
Time in between titles, in milliseconds. This does not include the duration of the animations.
Class name transferred to the top level element in the component. Use this for styling the text.
Class name for the background element that sits behind the text.
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 atransition
property defined.in
: String - class name for final state of the in animation. This class should have atransition
property defined.outStart
: String - class name for the final out state of the animation. This class should not have atransition
property defined.out
: String - class name for final state of the out animation. This class should have atransition
property defined.