https://github.com/dphilipson/resentence

Easy-to-use React component for morphing one string into another.
https://github.com/dphilipson/resentence

animation component react text text-animation

Last synced: 4 months ago
JSON representation

Easy-to-use React component for morphing one string into another.

• Host: GitHub
• URL: https://github.com/dphilipson/resentence
• Owner: dphilipson
• License: mit
• Created: 2019-01-03T02:44:42.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-01T20:56:27.000Z (almost 6 years ago)
• Last Synced: 2024-09-14T04:49:54.890Z (4 months ago)
• Topics: animation, component, react, text, text-animation
• Language: TypeScript
• Homepage: https://dphilipson.github.io/resentence
• Size: 1.68 MB
• Stars: 11
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Resentence

Easy-to-use React component for morphing one string into another. The demo

explains it much better than words can, so [go check out the

demo](https://dphilipson.github.io/resentence).

## Installation

With Yarn:

```

yarn add resentence

```

Or with NPM:

```

npm install resentence

```

## Usage

Wrap text you want to animate in a `` component and specify an

`align` prop, optionally passing `className` or `speed` props as well.

```tsx

import Resentence from "resentence";

function MyComponent({ text }) {

  return (

    

      {text}

    

  );

}

```

The props are as follows:

| Prop name   | Required? | Type                            | Description                                                             |

| ----------- | --------- | ------------------------------- | ----------------------------------------------------------------------- |

| `align`     | Yes       | `"left" \| "center" \| "right"` | How the text is aligned in the document layout. For details, see below. |

| `className` | No        | `string`                        | CSS classes that are passed to the Resentence element.                  |

| `speed`     | No        | `number`                        | Factor by which the animation speed is multiplied (default: 1).         |

### About the `align` prop

Resentence needs a bit of help to compute character positions if the Resentence

element changes size, which is a pretty common occurrence when the text changes

or the window resizes. To correctly animate the transition, Resentence needs to

know which part of the text is the "fixed point" and should remain in the same

location relative to the container as the container changes size.

Thus, Resentence requires the consumer to tell it how its text is aligned. This

is often the same as the container's `text-align` CSS property, and in fact

setting the `align` prop will add the appropriate `text-align` to the element,

but there are situations where an element's effective alignment is not the same

as its `text-align`. For example, right-aligned text can be produced by placing

text at the end of a flexbox row if it is given flex values to take no more

space than needed, forcing the text to be flush against the right side

regardless of its `text-align` property. Rather than attempt to compute

effective alignments for all possible layouts, Resentence instead asks the

consumer to let it know how it will be used in the larger layout of the page.

Copyright © 2019 David Philipson