@a7sc11u/scramble 中文文档教程

Question

Scramble

一个用于 React 的乱序文本 UI 组件。

动画维护一个内部滴答时钟，每秒运行多达 60 次，或每个动画帧运行一次。 动画从文本的开头开始，直到输入结束，给定一组参数，这些参数允许您控制添加的字符数和滴答数，以及每个字符随机化的次数。

在 https://scramble.vercel.app/ 现场演示

Props

Property	type	default	description
as	string	-	polymorphic tag
play	boolean	true	start/stop animation
text	string	-	text to scramble.
speed	number	0.4	0-1 range that determines the ticking speed. 1 means 1 tick per frame
scramble	number	8	how many times each character will randomize
step	number	1	how many characters are added to the scramble on each tick
stepInterval	number	1	how many ticks it requires to increment the step index
seed	number	3	adds random characters to the scramble, ahead of the ticking loop
seedInterval	number	10	ticks required to seed more random characters
onComplete	function	-	callback invoked on completion

Installation

  yarn add @a7sc11u/scramble
  //or
  npm install @a7sc11u/scramble

Usage

import { TextScramble } from '@a7sc11u/scramble';

export const App = () => {

  const elRef = React.useRef<HTMLDivElement>(null);

  const handleComplete = () => {
    console.log('scramble is done');
  }

  return (
    <TextScramble 
      ref={elRef}
      as="div"
      play={true}
      speed={0.4}
      scramble={8}
      step={1}
      stepInterval={1}
      seed={3}
      seedInterval={10}
      onComplete={handleComplete}
      text="Fugiat ullamco non magna dolor excepteur." 
    />
  );
};