¡Hola! こんにちは！テラーノベルのオスカルです。Webの開発をしてます。いつも言うんだけど、日本語はまだまだ勉強してますので、応援してください！
ᕦʕ •ᴥ•ʔᕤ
今回、Reactのライブラリについてこの記事を書こうと思いました。そんなに有名じゃないライブラリなので、たぶん良い読み物だと思います！
1- sweetalert2 🔗
懐かしい！！。。。これはReactだけじゃなくて、Javascriptのライブラリです。結構前から使ってます、jQuery時代からも！ユーザーにさまざまなメッセージを表示するために使用できるUIライブラリです。
このコードだけで：
Swal.fire({
icon: 'error',
title: 'オイ！！',
text: '押さないでって言ったじゃん！',
})
このクールなメッセージを示しています：
エラーかお知らせだけじゃなくて、ユーザーに入力を求めたり、オプションのリストから選択させるためにも使用することができますので、試してみる価値はあると思います!
2- react-hot-toast 🔗
SweetAlertを使ったら大きなお知らせ出せるけど、もしサイトであまり邪魔にならない通知を表示したい場合は、react-hot-toastライブラリをチェックしてみてください、色んな”トースト通知”は簡単で出せますよ：
toast('ナイス！よくできました！', { icon: '👏' })
このコードで通知出して、自動で消えます：
スタイルは自分でも設定できるけど、すぐに利用できる複数の事前定義された通知があります：
3- react-spinners 🔗
これは、サイト上でデータの読み込み状態を表示するために使用できる、複数のローディングアニメーションアイコンを含むライブラリです。
テラーノベルのウェブは早いからいらないけど 😎、timeoutを入れて出しました：
<PropagateLoader color="#36d7b7" size={15} />
アニメーションは2秒間表示され、その後ページが読み込まれます：
動作にCSSアニメーションを使用しているため、パフォーマンスが非常に良いです。色んなアイコンあるのでデモページから一個選んで使ってください！
僕はこれが一番好きだったんだ 🥹
4- react-advanced-cropper 🔗
このライブラリはかなり驚きました。画像を切り抜くためのユーティリティです。オプションは多くて良いドキュメントがあるから強力です。色々できるですが、とても使いやすいです！
<Cropper
src={imageUrl}
onChange={(cropper: CropperRef) =>
// 画像の切り抜き変更を処理する
console.log(cropper.getCoordinates());
}
className={'cropper'}
/>
That's me 笑
consoleを見たら, coordinatesなどを出てます：
{ height: 181, left: 814, top: 20, width: 218 }
そのデータとcanvasを使ってトリミングした画像をサーバーに保存とかダウンロードとかできます。サイトを見たらRecipesとAdvanced Recipesというページあって、一目で何ができるかを確認できます。本当に強力です 💪
5- React Joyride 🔗
新しいユーザーにサイトのツアーを案内したい場合は、このライブラリを使用してください。ツアーのステップを定義し、ライブラリがユーザーに適切なスタート地点を分かりやすく案内します。
これを見たらすぐわかると思います：
面白いですね！
CloseかBackボタンは英語で出るけど、絶対日本語でも出せると思います。エレメントまで自動でもスクロールしてくれるので、便利！
コードは結構簡単でした、ステップのアレイを定義し、各ステップでユーザーに示す要素のセレクターと表示したい説明を指定します。それらは順番に表示されます：
const steps = [{
target: '.user-menu',
content: 'ここをクリックするとアプリに飛びます',
},
{
target: '.write-button',
content: 'ここをクリックするとスタジオに飛びます。自分のストーリーを書けますよ！',
},
{
target: '#logo',
content: 'これは何もしないけど可愛いロゴですね！😊',
},
{
target: '.appLinks',
content: 'iOS / Androidアプリあるので、ぜひダウンロードしてみてください！',
}];
終わりに
より有名なライブラリもありますが、今回はあまり人気のないものも含めていくつか集めてみました。でも、知っていて損はないと思うので、ぜひ活用してみてください！
今日はここまでです！ 暑いから気をつけてください！
¡Adios! Happy coding!
Discussion