braposo / React Text Loop
Licence: mit
Animate words in your headings
Stars: ✭ 595
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Text Loop
React Contenteditable
React component for a div with editable contents
Stars: ✭ 1,057 (+77.65%)
Mutual labels: text, react-component
Sunflower
🦹 Process components for antd4 & antd3 by alipay industry technology
Stars: ✭ 441 (-25.88%)
Mutual labels: react-component
Pesdk Android Demo
A fully customizable photo editor for your app.
Stars: ✭ 464 (-22.02%)
Mutual labels: text
Yjbannerview
【抱歉,暂时不提供开源】A very popular and highly customized banner view, 无限循环滚动轮播图BannerView、焦点图, 支持Cocoapods 及 Carthage. 支持完全自定义
Stars: ✭ 506 (-14.96%)
Mutual labels: cycle
Ybattributetexttapaction
一行代码添加文本点击事件/a fast way to implement click event text
Stars: ✭ 430 (-27.73%)
Mutual labels: text
React Contexify
Add a context menu to your react app with ease
Stars: ✭ 575 (-3.36%)
Mutual labels: react-component
React Compound Slider
◾️ React Compound Slider | A small React slider with no opinion on markup or styles
Stars: ✭ 553 (-7.06%)
Mutual labels: react-component
Fast Cgi Client
A PHP fast CGI client for sending requests (a)synchronously to PHP-FPM
Stars: ✭ 478 (-19.66%)
Mutual labels: loop
Zep
Zep - An embeddable editor, with optional support for using vim keystrokes.
Stars: ✭ 477 (-19.83%)
Mutual labels: text
Input Moment
React datetime picker powered by momentjs
Stars: ✭ 507 (-14.79%)
Mutual labels: react-component
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (-25.55%)
Mutual labels: react-component
React Native Hyperlink
A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable
Stars: ✭ 572 (-3.87%)
Mutual labels: text
React Day Picker
Date picker component for React
Stars: ✭ 4,374 (+635.13%)
Mutual labels: react-component
React Event Timeline
A responsive event timeline in React.js
Stars: ✭ 504 (-15.29%)
Mutual labels: react-component
Surmon.me.native
📱 My blog app, powered by react-native
Stars: ✭ 579 (-2.69%)
Mutual labels: react-component
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (-3.19%)
Mutual labels: react-component
react-text-loop
An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and spring params.
Installation
npm install react-text-loop
or yarn add react-text-loop
How to use
You can also run the examples by cloning the repo and running yarn start
.
Usage
import TextLoop from "react-text-loop";
import Link from "react-router";
import { BodyText } from "./ui";
class App extends Component {
render() {
return (
<h2>
<TextLoop>
<span>First item</span>
<Link to="/">Second item</Link>
<BodyText>Third item</BodyText>
</TextLoop>{" "}
and something else.
</h2>
);
}
}
Props
Prop | Type | Default | Definition |
---|---|---|---|
interval | number | array | 3000 |
The frequency (in ms) that the words change. Can also pass an array if you want a different interval per children |
delay | number | 0 |
A delay (in ms) for the animation to start. This allows to use multiple instances to create a staggered animation effect for example. |
adjustingSpeed | number | 150 |
The speed that the container around each word adjusts to the next one (in ms). Usually you don't need to change this. |
fade | boolean | true |
Enable or disable the fade animation on enter and leave |
mask | boolean | false |
Mask the animation around the bounding box of the animated content |
noWrap | boolean | true |
Disable whitepace: nowrap style for each element. This is used by default so we can always get the right width of the element but can have issues sometimes. |
springConfig | object | { stiffness: 340, damping: 30 } |
Configuration for react-motion spring |
className | string | Any additional CSS classes you might want to use to style the image | |
children | node | The words you want to loop (required) |
Caveats
Because <TextLoop>
loops through its children nodes, only root-level nodes will be considered so
doing something like:
<TextLoop>
<div>
<span>First item</span>
<span>Second item</span>
</div>
<div>Third item</div>
</TextLoop>;
will make first and second item to be treated as one and animate together.
You can also just send a normal array as children prop if you don't need any individual styling for each node.
<TextLoop children={["Trade faster", "Increase sales", "Stock winners", "Price perfectly"]} />;
Examples
Fast transition
<TextLoop interval={100}>...</TextLoop>;
Wobbly animation
<TextLoop springConfig={{ stiffness: 180, damping: 8 }}>...</TextLoop>;
For many other examples, please have a look at the CodeSandbox playground.
Contributing
Please follow our contributing guidelines.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].