react-to-printの使い方

はじめに

明日から冬休みです。

子供のモチベーションを保ちつつ、宿題を楽しくもれなくやって欲しい。やれやれ言いたくないので、見える化しようと思ってダッシュでアプリ作ってます。

子供なのでPCやスマホでポチポチするより壁に貼った紙にシール貼る方がいいと思うんですよね。

でもタブレット端末で操作してクリアしてくみたいなのもいいなと。。

我が子はシール嬉しいってことだったので、まずは印刷機能を付けてみました。

簡単に印刷機能作る方法探して見つけたreact-to-printを使ってみたらめちゃくちゃ簡単に実装できたのでご紹介します！

インストール

npm i react-to-print

インポート

import { useRef } from "react";
import { useReactToPrint } from "react-to-print";

印刷したい部分の要素の管理useRefを使うので一緒にインポートします。

使い方

const contentRef = useRef<HTMLDivElement | null>(null);
const reactToPrintFn = useReactToPrint({ contentRef });

useReactToPrintにはcontentRefをオブジェクトで引数に渡して使います。

公式にあるまんまですが..

印刷したい要素にrefを渡します。

<div className="grid grid-cols-2 gap-5 print:p-20" ref={contentRef}>

ちなみにTailwindcssでプリント時にのみ適用したいスタイル充てるにはprint:をつけるだけでした！

印刷ボタン

<Button
    type="button"
    variant="bg-blue"
    onClick={() => reactToPrintFn()}
>
     印刷する
</Button>

以上です。

これだけで印刷ボタン押したら印刷プレビュー画面が出現します！

おわりに

はじめてやったのでスムーズにできるか心配していましたが、意外と簡単にできました！

はじめにの文章長いわりに内容薄くて申し訳ないですが、この辺で！続きやってきます！！