【React】コードを書いているようなアニメーションを作成する
概要
Next.jsでmarkdownブログを作ったのですが、その中でコードを書いているようなアニメーションを実装してみたので、共有します。
カスタムフックとして切り出せたので誰でも使用出来ます。
完成したもの
自作ブログで見れます。
カスタムフック
setInterval
で文字列の長さのstateをアップデートしているだけです。
import { useEffect, useRef, useState } from 'react';
export const useStep = (text: string, stepTime: number) => {
const [length, setLength] = useState(0);
const lengthRef = useRef(length);
useEffect(() => {
lengthRef.current = length;
}, [length]);
useEffect(() => {
const timer = setInterval(() => {
setLength(lengthRef.current === text.length ? lengthRef.current : lengthRef.current + 1);
}, stepTime);
return (): void => clearInterval(timer);
}, []);
return text.slice(0, length);
};
Ref
を用いないと、クロージャの働きによってsetInterval
内のlength
の値が変わりません。
setInterval
した場合、useEffect
のreturnにタイマー解除のコールバックを忘れずに。
コンポーネント
コードと、間隔を指定して、返り値をrenderするだけです。
import React from 'react';
import { useStep } from '../../hooks/useStep';
import { CodeBlock } from '../Post/MarkDownViewer';
type Props = {
code: string;
language: string;
};
export const LiveCode: React.FC<Props> = props => {
const codeState = useStep(props.code, 35);
return (
<>
<CodeBlock value={codeState} language={props.language} />
</>
);
};
CodeBlock
コンポーネントでは、React-Markdown
とreact-syntax-highlighter
を使用しています。
まとめ
React楽しすぎますね。
やっぱりカスタムフックで機能とコンポーネントを分けられるところがクールです。
Author And Source
この問題について(【React】コードを書いているようなアニメーションを作成する), 我々は、より多くの情報をここで見つけました https://qiita.com/ragnar1904/items/ef260a593a554b14c4e8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .