Weitere ähnliche Inhalte
Ähnlich wie 20230228 React Tech Night TOKYO #3 (20)
20230228 React Tech Night TOKYO #3
- 2. おまえだれよ
もりしん
● 本名は盛 慎 (Makoto Mori)
● 株式会社 Magic Moment
● フロントエンドエンジニア
● 普段は TypeScript / React ばかり書いている
● ハッカソンが好き (企画・運営経験もあり)
● 趣味はフォートナイト、バドミントン、ボルダリング
● Another works のイベントは1年1ヶ月ぶり2回目
- 5. 紹介基準
● 私が知っている
● なんかリッチに感じる
● 学習コストが低い (比較的簡単に使える)
● 既存のプロジェクトへの後入れが容易
● React 用のライブラリが用意されている
● きちんと更新されている (React 18 で動作する)
(ということで、みんなお馴染み背景のやつらは紹介しないよ)
- 7. React Icons
Ant, Bootstrap, Fontawesome, Material Design など、
様々なアイコンが全て詰まったアイコンパック
npm i react-icons
import { FiPlus } from 'react-icons/fi'
...
<Button onClick={handleClick}>
<FiPlus />
{children}
</Button>
- 9. Boring Avatars
seed 文字列からアバターを自動生成できる便利な API ...の React ライブラリ
類似のもので DiceBear というのもある (こちらの方がスタイルは豊富)
npm i boring-avatars
import Avatar from 'boring-avatars'
...
<User>
<Avatar
size={20}
name="morishin"
variant="beam"
/>
morishin
</User>
- 13. React Lottie Player
Web アニメーションライブラリ Lottie の React 用プレイヤー
Lottie Files のサイトでカスタマイズした JSON を読み込ませるだけ
npm i @lottiefiles/react-lottie-player
import { Player } from '@lottiefiles/react-lottie-player'
...
<Player
autoplay
src="https://assets8.lottiefiles.com/packages/lf20_lp7qD9RDx1.json"
/>
- 15. 他にも色々 (時間の関係で割愛)
reactour
● プロダクトツアー (チュートリアル) 用のライブラリ
● サービス上の「ココ!」って場所にスポットライトを当てられる
● react-joyride ってやつの方が有名っぽい
framer-motion
● アニメーションライブラリ Framer の React 用
react-popper
● Popover (ツールチップ) でおなじみ popper.js の React 用
● ブラウザが Popper API に対応すれば、いずれ要らない子に...?
さらに高機能なものを知りたいなら Awesome React を眺めると幸せになれるかも