✨ Reactマスターになるための8つのコンポーネント 🧙♂️ 🪄
究極のウェブサイトを構築するために使えるReactのコンポーネントを集めました。
それぞれユニークな使い道があります！
忘れずにスターをつけてね 🌟
さっそく見ていきましょう！
- Clickvote - いいね、アップボート、レビューをどんなコンテキストでも。 👑
あなたのアプリにLikeやVote、レビューコンポーネントをシームレスに統合。
このシンプルなReactコードを使っていいねボックスやレビューボックス、リアクションコンポーネントを表示しましょう！
import { ClickVoteProvider } from '@clickvote/react';
import { ClickVoteComponent } from '@clickvote/react';
import { LikeStyle } from '@clickvote/react';
<ClickVoteProvider>
<ClickVoteComponent id={CONTEXT} voteTo={ID}>
{(props) => <LikeStyle {...props} />}
</ClickVoteComponent>
</ClickVoteProvider>
こちらでスターをつけてね 🌟
https://github.com/clickvote/clickvote
- Novu - アプリ内通知を追加！
すべてのコミュニケーションチャネルを一か所で管理するためのシンプルなコンポーネントとAPI：メール、SMS、ダイレクト、プッシュ
このReactコンポーネントを使ってアプリにアプリ内通知を追加しましょう。
import {
NovuProvider,
PopoverNotificationCenter,
NotificationBell,
IMessage,
} from "@novu/notification-center";
<NovuProvider
subscriberId={"SUBSCRIBER_ID"}
applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
<PopoverNotificationCenter colorScheme="dark">
{({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
</PopoverNotificationCenter>
</NovuProvider>
こちらでスターをつけてね 🌟
https://github.com/novuhq/novu
- CopilotKit - GPTを使ったテキストの自動補完を追加！
どんなReactアプリにも強力でカスタマイズ可能なコパイロット。
数分でスタートして、無限にイテレーション。
Gmailのようにコンテンツを自動補完してくれるシンプルなコンポーネント。
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";
<CopilotProvider>
<CopilotTextarea/>
</CopilotProvider>
こちらでスターをつけてね 🌟
https://github.com/RecursivelyAI/CopilotKit
- Tolgee - どんなコンテキストも任意の言語に翻訳！
スマートプラットフォーム、素早い統合、痛みのないローカリゼーション。
どんなコンテキストでも任意の言語に翻訳するシンプルなコンポーネント！
import { TolgeeProvider, T } from "@tolgee/react";
<TolgeeProvider
tolgee={tolgee}
fallback="Loading..." // 読み込み中のフォールバック
>
<T keyName="translate_me">Translate me!</T>
</TolgeeProvider>
```<br><br>こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。<br>[https://dev.to/github20k/8-components-to-become-a-react-master-2ee4](https://dev.to/github20k/8-components-to-become-a-react-master-2ee4)
