# react-text-transition animates a string swap with a spring

> react-text-transition is a small React component that slides old and new text in and out with a react-spring animation, exposing direction, delay, inline mode and the full spring preset set. It needs react-spring as its only runtime dependency and React 18 as a peer.

**WinterCore/react-text-transition** — Animate your text changes

- Repository: https://github.com/WinterCore/react-text-transition
- Stars: 636 · Forks: 26
- Language: TypeScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/wintercore-react-text-transition

## One component, one job, one runtime dependency

react-text-transition is a React component that animates text when it changes, and the scope is narrow in a way that is easy to appreciate. The package contains a single default export, TextTransition, plus a named export for presets, and it declares exactly one runtime dependency, @react-spring/web at version 9.7.2. Everything else in the manifest is a development dependency for building the library and running the demos, including react 18.2.0, typescript 4.7.3 and webpack 5. The build script runs tsc twice, once for the CommonJS output in lib and once with an es6 module target into lib-esm, and both directories are published along with the src folder and the README, with type declarations at lib/index.d.ts. The peer dependency is react at 18 or newer, so the package is not tied to a single React version but it does not support the older ones either.

## The usage example is small enough to copy verbatim

The README example is a rotating list of words driven by a setInterval, and it shows the two things that matter: you pass the text as children, and you pass a spring configuration. The presets are imported alongside the component and referenced by name:

```javascript
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 springConfig={presets.wobbly}>{TEXTS[index % TEXTS.length]}</TextTransition>
    </h1>
  );
};
```

The component takes the new string as its children, and the animation is driven entirely by react-spring underneath, so the exit and enter of the old and new strings are handled by the library rather than by a key change in your own markup.

## Direction, delay and the inline mode solve the layout problems

The props table is where the real design decisions are visible. Direction is a string enum with the default 0, accepting up or down as all-lowercase strings, and it determines which way the text travels. Delay is a number in milliseconds, defaulting to 0, which is the amount of time to wait before transitioning. Inline takes a boolean, false by default, and makes the wrapper an inline element that resizes based on the text currently shown, which is the setting to reach for when you want static text on the same line. className and style pass straight through to the wrapper, so the wrapper can be targeted with your own CSS. The children prop is marked required, and it is the node that gets animated. The last prop, translateValue, is a string defaulting to 100%, and it is the transform value used to determine the height animation, which means you can control how far the element moves vertically relative to its own box.

## Six spring presets and a default configuration

The animation character is a react-spring spring configuration, and the component ships react-spring's presets under the name presets. The default springConfig object is given as mass 1, tension 170 and friction 26, and the presets available are default, gentle, wobbly, stiff, slow and molasses. Using a preset is a matter of importing it and passing it to the component:

```javascript
import TextTransition, { presets } from 'react-text-transition';

// in your render method
<TextTransition springConfig={presets.wobbly}>{this.state.text}</TextTransition>;
```

The practical consequence is that this component is not really a text animation library with its own motion design. It is a thin wrapper that turns a string swap into a react-spring transition, and the entire feel of the animation comes from the spring values you pass. That is a strength if you already know react-spring, because you keep the tuning knobs, and a limitation if you expected a component with its own curated set of text-specific effects, since nothing here is specialised for type.

## The React version floor is stated two different ways

There is an inconsistency in the documentation worth catching before you install. The README's note at the end says the plugin requires react +16.8, which is the version floor for the hook based API the example uses. The package manifest, however, declares the peer dependency as react >=18.0.0, and the development environment is built against react 18.2.0. The strict reading is that the runtime requirement in the manifest is React 18 or newer, so the README line is stale. This is the kind of detail that shows up as an install warning rather than a build failure, depending on how strict your package manager is about peer ranges, and it is worth checking against your own React version before you plan a migration path around this component.

## Repository layout and the demo workflow

The repository is small and mostly about the library plus its demos. There is a src/ directory holding the component source, demos/ with a webpack configuration for the development server, example-gifs/ with the animated example shown in the README, a webpack.config.js at the root, a .prettierrc.js for formatting, a yarn.lock, and a tsconfig.json. The package manifest defines two scripts, build, which is the double tsc compile, and dev, which runs webpack serve in development mode against the demos configuration, and the README tells you to run npm run dev to use the demo. The project also links a CodeSandbox so you can play with the TypeScript version in a browser before installing anything, and the topics on the repository are the short list you would expect, animate, react, text and transition.

## Against a CSS transition on a key change

The alternative is to write the animation yourself, which usually means rendering the old and new strings in absolutely positioned elements, animating their transform and opacity, and handling the container height so the layout does not jump. That is the code this component replaces, and for a single headline it is not much code. It becomes real code when the same swap is needed in several places, or when the text length varies and the container has to resize smoothly. The difference in approach here is that the spring physics come from react-spring rather than from a CSS keyframe, so the motion is interruptible and settles rather than running a fixed duration curve, and the container sizing problem is handled by the translateValue prop instead of by your own measurement. The cost is a runtime dependency on react-spring and a peer requirement on React 18, for something a stylesheet can often do well enough.

## Conclusion

react-text-transition fits a React app that swaps short strings, a rotating headline or a status label, and wants a spring animation without hand writing transform and overflow rules for a wrapper element. It does not fit a page that needs long passages of text to cross-fade, since the component is built around a single node changing, and it does not fit a project still on React 16 or 17, because the package declares a peer dependency on React 18 or newer even though the README still mentions 16.8. Verify first that the animation suits the length of the strings you intend to swap, that you are on React 18, and whether the default spring configuration needs adjusting for the type size and the translateValue you use.

## FAQ

### How do I install react-text-transition?

Run npm install -S react-text-transition. The package ships CommonJS output in lib, an ES module build in lib-esm, type declarations and the src folder, and it declares react as a peer dependency of 18 or newer.

### Which animation presets does react-text-transition offer?

The presets are default, gentle, wobbly, stiff, slow and molasses, and they come from react-spring. You import them alongside the component with import TextTransition, { presets } from 'react-text-transition' and pass one as the springConfig prop. The default configuration is mass 1, tension 170 and friction 26.

### What React version does react-text-transition need?

The package manifest declares react >=18.0.0 as a peer dependency, while the README note still says the plugin requires react +16.8. The manifest is the stricter and more current of the two, so React 18 or newer is what to plan for.

### How do I control the direction and timing of the text transition?

The direction prop is a string enum accepting up or down as all-lowercase strings, and the delay prop sets how many milliseconds to wait before transitioning. The inline prop makes the wrapper an inline element that resizes with the text shown, and translateValue sets the transform value used for the height animation.

## Sources

- [Issues](https://github.com/WinterCore/react-text-transition/issues)
- [License: MIT](https://github.com/WinterCore/react-text-transition/blob/master/LICENSE)
- [README](https://github.com/WinterCore/react-text-transition/blob/master/README.md)
- [WinterCore/react-text-transition on GitHub](https://github.com/WinterCore/react-text-transition)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/wintercore-react-text-transition