すごいReactパッケージ5選

本記事は、[Varun Chilukuri](https://medium.com/@varunch)氏による「[Five awesome React packages to check out](https://javascript.plainenglish.io/five-awesome-react-packages-to-check-out-1ee42f2c19f7)」（2020年9月8日公開）の和訳を、著者の許可を得て掲載しているものです。

#すごいReactパッケージ5選

>小さくてもインパクトのある変更で、あなたのアプリを競合他社から引き離します。

![Image for post](https://miro.medium.com/max/700/1*I_JUZpOeDH29bn_YnhvvzQ.jpeg)

##1. React Loader Spinner

待つのが好きな人はいません。今やユーザーは最低限の条件として、ウェブサイトが高速であることを求めています。アプリが重いか遅い場合は、コンテンツの読み込み中、この最新のローディングアニメーションを表示しましょう。アプリの美観を向上させるだけでなく、ユーザーを維持するのにも役立ちます。

![React Loader Spinner](https://miro.medium.com/max/700/1*2nJgZmFETW8dRuP75Ch9qw.gif)
>このパッケージで提供する全ローディングアニメーション

`npm`または`yarn`から直接インストールします。

```javascript
npm i react-loader-spinner
//or
yarn add react-loader-spinner
```

[loader.js](https://gist.github.com/VarunChilukuri/4fa7841f76365cb9704bd5835c175ae6#file-loader-js)

次に、必要なimport文を追加します。

```javascript
import Loader from 'react-loader-spinner'
```

[loader.js](https://gist.github.com/VarunChilukuri/18c997b882a75285b238e009bab82e58#file-loader-js)

そして、以下をプロジェクトに追加します。

```javascript
<Loader
   type="Puff"
   color="#00BFFF"
   height={100}
   width={100}
   timeout={3000} //3 secs
/>
```

[loader.js](https://gist.github.com/VarunChilukuri/e099b6af9751db6750a3d05076a497f5#file-loader-js)

詳細については、ドキュメントを参照してください。

>**react-loader-spinner**
>react-spinner-loaderは、非同期の待機中の動作を実装できる、単純なReact SVGスピナーコンポーネントです。
>[www.npmjs.com](https://www.npmjs.com/package/react-loader-spinner)

##2. React Animated Burgers

このパッケージは、ナビゲーションバーにアニメーション付きメニューアイコンを追加します。無数のアイコンとアニメーションが用意されています。とても簡単に、カスタマイズとプロジェクトへの追加ができます。私は喜んで何度も使っています。

![React Animated Burgers](https://miro.medium.com/max/581/1*zz_r_red15IrWgqlpkVfAw.gif)
>このパッケージで提供するさまざまなアニメーションの例

他の`npm`/`yarn`パッケージと同様に、1行で簡単にインストールできます。

```javascript
npm i react-animated-burgers
//or
yarn add react-animated-burgers styled-components
```

[hamburger-menu.js](https://gist.github.com/VarunChilukuri/584c73dd7adc79fc3275a0bd2f72a152#file-hamburger-menu-js)

アニメーションアイコンを1つ選択してimportするだけで、プロジェクトに追加できます。

```javascript
import { HamburgerSpin } from 'react-animated-burgers'
```

[hamburger-menu.js](https://gist.github.com/VarunChilukuri/74fcdfc6ca0b2759416c075160cdcff2#file-hamburger-menu-js)

そうすると、ヘッダーやナビゲーションバーに簡単に追加できます。

```javascript
<HamburgerSpin
   buttonColor="red" //optional
   barColor="#F5F5F5" //optional
   {...{ isActive, toggleButton }}
/>
```

[hamburger-menu.js](https://gist.github.com/VarunChilukuri/ec0195755d705fdbacb0b7526a8bdfc2#file-hamburger-menu-js)

最も正確で新しい情報については、ドキュメントを参照してください。

>**react-animated-burgers**
>パッケージのインストールは、npm i -S react-animated-burgers styled-components またはyarn add react-animated-burgers...
>[www.npmjs.com](https://www.npmjs.com/package/react-animated-burgers)

##3. React Responsive Carousel

多くのウェブサイトでは、カルーセルを設置して、商品、チームメンバー、会社に関する一般的な情報を表示しています。サイトにカルーセルを設置したいと思っているなら、おそらく多くの中途半端またはいまいちなパッケージを見たことがあるでしょう。これは、他のパッケージとは違い、インパクトがあり軽量、完全にカスタマイズ可能です。

[React Responsive Carousel](https://miro.medium.com/max/700/1*9M_XBrGzaOS9-yfz3Ov4qg.gif)
>カルーセルの動作デモ

パッケージをインストールします。

```javascript
npm i react-responsive-carousel
//or
yarn add react-responsive-carousel
```

[carousel.js](https://gist.github.com/VarunChilukuri/8843e6a24de4380234d8f8179fd84b2f#file-carousel-js)

import文を追加して、プロジェクトに追加します。

```javascript
import { Carousel } from 'react-responsive-carousel'
import "react-responsive-carousel/lib/styles/carousel.min.css";
```

[carousel.js](https://gist.github.com/VarunChilukuri/2ed08a258ce978ed630d1df02582dcec#file-carousel-js)

以下をウェブサイトに簡単に追加できます。

```javascript
<Carousel>
   <div>
      <img src="assets/1.jpeg" />
      <p className="legend">Legend 1</p>
   </div>
   <div>
      <img src="assets/2.jpeg" />
      <p className="legend">Legend 2</p>
   </div>
   <div>
      <img src="assets/3.jpeg" />
      <p className="legend">Legend 3</p>
   </div>
</Carousel>
```

[carousel.js](https://gist.github.com/VarunChilukuri/7a693f61dc2f7816272ff63cce0f1156#file-carousel-js)

このパッケージは、制御方法が多く自由度が高いです。このプロジェクトを十分に活用するには、GitHubリポジトリなどを見てください。

>**react-responsive-carousel**
>インパクトがあり軽量、完全にカスタマイズ可能なReactアプリ用カルーセルコンポーネントです。レスポンシブモバイルフレンドリーです...
>[www.npmjs.com](https://www.npmjs.com/package/react-responsive-carousel)

##4. React CountUp

企業の統計情報をウェブサイトに表示することは、かつてない程に簡単になりました。このパッケージでは、動的カウンターを使って、印象的な数字を目立たせて強調表示できます（溶け込んでしまう静的テキストとは違います）。

![React CountUp](https://miro.medium.com/max/700/1*-_TmSXM8nqFW5aQENrduzw.gif)

パッケージをインストールします。

```javascript
npm i react-countup
//or
yarn add react-countup
```

[countup.js](https://gist.github.com/VarunChilukuri/4fa5059122cfbc36b1022a5f7b4b7b71#file-countup-js)

以下をプロジェクトファイルの先頭に追加して、プロジェクトに追加します。

```javascript
import CountUp from 'react-countup';
```

[countup.js](https://gist.github.com/VarunChilukuri/edd2061bf585f585ad71880ab2831ad4#file-countup-js)

以下は、3つの簡単な使用例です。

```javascript
<CountUp end={100} />
<CountUp delay={2} end={100} />
<CountUp duration={5} end={100} />
```

[countup.js](https://gist.github.com/VarunChilukuri/591d267b12a8adcacded10907d53ae9c#file-countup-js)

より高度な機能と自由度については、パッケージのページを参照してください。

>**react-countup**
>CountUp.jsのReactコンポーネントラッパーです。
>[www.npmjs.com](https://www.npmjs.com/package/react-countup)

##5. React Markdown

Markdown言語が提供する効率性とシンプルさが好きな人にとっては朗報です。ReactコードでMarkdownを使う簡単な方法があります。このパッケージを使うだけです！

![React Markdown](https://miro.medium.com/max/700/1*elWqMU8tGjyGA2f7V1D7kw.png)

`npm`でインストールします。

```javascript
npm i react-markdown
```

[markdown.js](https://gist.github.com/VarunChilukuri/def21298c12f804c5390649273b989aa#file-markdown-js)
>注：残念ながらこのパッケージは、yarnによるインストールをサポートしていません。

必要な文をコードに追加します。

```javascript
const ReactMarkdown = require('react-markdown')
```

[markdown.js](https://gist.github.com/VarunChilukuri/cdbeeddc6e66fd2d97cb2e64c9985248#file-markdown-js)

使い始めましょう！

```javascript
const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(<ReactMarkdown source={input} />, document.getElementById('container'))
```

[markdown.js](https://gist.github.com/VarunChilukuri/5aab3f4b75bb96e3b0b789ae48adef77#file-markdown-js)

最も正確で新しい情報については、公式ページを参照してください。

>**react-markdown**
>Markdownを純粋なReactコンポーネントとしてレンダリングします。デモはこちらで見られます。https://rexxars.github.io/react-markdown/ react-markdown...
>[www.npmjs.com](https://www.npmjs.com/package/react-markdown)

##おわりに

この記事が参考になり、アプリに追加したいと思うパッケージが1つでもあったなら幸いです。

![Image for post](https://miro.medium.com/max/700/1*fSjOzwpfshYIXc2iLDGwPQ.png)

この記事などで使われているコードはすべて、[私のGitHubレポジトリ](https://github.com/VarunChilukuri/Medium-Examples)にあります。

この記事が役に立った場合は、フォローをお願いします！React.jsに関する記事がもっとあります。フィードバックやコメントもお待ちしています。

###JavaScriptを分かりやすく解説

私たちが3つのパブリケーションとYouTubeチャンネルを持っていることを知っていますか？すべてのリンクはこちら[**plainenglish.io**](https://plainenglish.io/)！

##翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: [Varun Chilukuri](https://medium.com/@varunch)
Original Article: [Five awesome React packages to check out](https://javascript.plainenglish.io/five-awesome-react-packages-to-check-out-1ee42f2c19f7)
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

>**こちらもどうぞ**
>[すごいReactフック8選](https://qiita.com/baby-degu/items/52dbb382bbaf6c43e2db)
>[クリーンなReactプロジェクトの21のベストプラクティス](https://qiita.com/baby-degu/items/ea4eede60bbe9c63a348)

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。