WinterCore / React Text Transition
Licence: mit
Animate your text changes
Stars: ✭ 121
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Text Transition
Splitting
JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!
Stars: ✭ 1,222 (+909.92%)
Mutual labels: text, transition
Mergi
go library for image programming (merge, crop, resize, watermark, animate, ease, transit)
Stars: ✭ 127 (+4.96%)
Mutual labels: transition, animate
Render
Universal data-driven template for generating textual output, as a static binary and a library
Stars: ✭ 108 (-10.74%)
Mutual labels: text
Floatingtoolbar
A toolbar that morphs from a FloatingActionButton
Stars: ✭ 1,540 (+1172.73%)
Mutual labels: transition
Easytransitions
A simple way to create custom interactive UIViewController transitions
Stars: ✭ 1,592 (+1215.7%)
Mutual labels: transition
Nord Sublime Text
An arctic, north-bluish clean and elegant Sublime Text theme.
Stars: ✭ 109 (-9.92%)
Mutual labels: text
Pixelwave
Fully customizable pixel wave animation for seamless page transitions.
Stars: ✭ 119 (-1.65%)
Mutual labels: transition
Nlp Pretrained Model
A collection of Natural language processing pre-trained models.
Stars: ✭ 122 (+0.83%)
Mutual labels: text
React Router Transitions
Easily handle transitions in your React application 🍃
Stars: ✭ 117 (-3.31%)
Mutual labels: transition
Morpherings
CSS Animations that cause buttons to morph into forms.
Stars: ✭ 121 (+0%)
Mutual labels: transition
Datasets knowledge embedding
Datasets for Knowledge Graph Completion with textual information about the entities
Stars: ✭ 116 (-4.13%)
Mutual labels: text
Eyo
🦔 CLI for restoring the letter «ё» (yo) in russian texts
Stars: ✭ 119 (-1.65%)
Mutual labels: text
Yudisplacementtransition
A GPU accelerated transition library makes use of displacement maps to create distortion effects.
Stars: ✭ 121 (+0%)
Mutual labels: transition
Materialtextfield
A different beautiful Floating Edit Text
Stars: ✭ 1,504 (+1142.98%)
Mutual labels: text
Fastpunct
Punctuation restoration and spell correction experiments.
Stars: ✭ 121 (+0%)
Mutual labels: text
React-Text-transition
Animate your text changes
Installation
npm install -S react-text-transition
Using the demo
npm run dev
How to use
Example
import React from "react";
import TextTransition, { presets } from "react-text-transition";
const TEXTS = [
"Forest",
"Building",
"Tree",
"Color"
];
const App = () => {
const [index, setIndex] = React.useState(0);
React.useEffect(() => {
const intervalId = setInterval(() =>
setIndex(index => index + 1),
3000 // every 3 seconds
);
return () => clearTimeout(intervalId);
}, []);
return (
<h1>
<TextTransition
text={ TEXTS[index % TEXTS.length] }
springConfig={ presets.wobbly }
/>
</h1>
);
};
Props
Prop | Type | Default | Definition |
---|---|---|---|
text | String | REQUIRED | The text you want to show. |
direction | String (enum) | 0 | Used to determine the direction of the transition "up" or "down" (Must be an all-lowercase string). |
inline | Boolean | false | Makes the wrapper inline (will auto resize based on contents). |
delay | Number | 0 | Delay the transition of the text (in milliseconds). |
springConfig | Object | { mass: 1, tension: 170, friction: 26 } | react-spring's spring configuration. |
noOverflow | Boolean | false | Setting this to true will make the transitioning text appear clipped (Will simply set overflow : hidden on the wrapper). |
className | String | "" | Any css classes that you might want to send to the wrapper. |
style | Object | {} | Any styles that you might want to send to the wrapper. |
Detailed Props
String
text Changing this prop triggers the transition.
Boolean
inline Will simply make the wrapper an inline element and animate its width based on currently showing text, this is useful if you want to show some other static text on the same line.
Number
delay The amount of miliseconds to wait before transitioning.
Object
spring react-spring's Spring configuration (Refer to the configs section)
react-spring's spring presets are exposed as presets
.
import TextTransition, { presets } from "react-text-transition";
// in your render method
<TextTransition
text={ this.state.text }
springConfig={ presets.wobbly }
/>
There're 4 presets
-
default
The default. gentle
wobbly
stiff
slow
molasses
String
className Any css classes that you might want to provide to the wrapper.
Object
style Any css styles that you might want to provide to the wrapper.
NOTE
Feel free to ask any questions about using this component. This plugin requires react +16.8
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].