react-textra's Introduction

react-textra

Animate text in react. demo

Simple
No dependency
Multiple effects

Installing

npm i react-textra

Examples:

import Textra from 'react-textra'

function MyComponent() {
   return (
     <div>
       <Textra effect='flash' data={['one', 'two', 'three']} />
     </div>
   ) 
}

If you want to stop longer:

<Textra 
  effect='flash' 
  stopDuartion={4000} 
  data={['one', 'two', 'three']} />

If you want to change animation duration:

<Textra 
  effect='flash'
  duration={1000} 
  data={['one', 'two', 'three']} />

Props

Prop	Detail	Type	Default
data (required)	Array of data to be animated	Array	null
effect	Animation effect	String	simple
stopDuration	How long should it stop while showing each item	Number	3000ms
duration	Animation duration	Number	500ms
onUpdate	Will be called on every update, giving the index of animated item.	(index: number) => void	-

Effects

There are 9 types of effects available:

effect
simple
rightLeft
leftRight
topDown
downTop
flash
flip
press
scale

A11y concerns

We do not provide any aria attributes by default. But if you see updates important and you want to let screen reader users know of them, you can use aria-live and aria-relevant.

Here is an example of how you can use these attributes alongside this library:

<Textra
  duration={2000}
  data={['one', 'two']}
  aria-live='polite'
  aria-relevant='text removals'/>

react-textra's People

Contributors

Stargazers

Watchers

react-textra's Issues

A11ly concerns

Should make this accessible, this can be done by adding props like:

aria-live="polite"
aria-relevant="text removals"

Have to decide to make it optional in the library or not.

React 18 Warnings

Hey, excellent plugin. While using it with Next.js, React 18 throws a warning:

Warning: React does not recognize the `stopDuration` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `stopduration` instead. 
If you accidentally passed it from a parent component, remove it from the DOM element.

Can you tell me how to hide this annoying warning?

Thanks again!