React.js ライブラリ「react-double-marquee」を使って文字スクロールを表示する
ライブラリ「react-double-marquee」をインストールすると、文字スクロールを表示することが可能です。ここでは、react.jsでreact-double-marqueeを利用するための手順と簡単な使い方を記述してます。
環境
- OS CentOS Stream release 8
- node V12.16.3
- npm 6.14.7
- React 16.13.0
react.js環境構築
下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。
create-react-app react-app
react-double-marqueeインストール
作成したプロジェクトに移動して、インストールします。
## 作成したプロジェクトに移動
cd react-app
## インストール
npm install react-double-marquee
react-double-marquee使い方
srcディレクトリにsample.jsと名前で下記のコードを記述します。
import React from 'react'
import Marquee from 'react-double-marquee'
const Sample = () => {
return (
<div>
<div
style={{
width: '500px',
whiteSpace: 'nowrap',
}}
>
<Marquee>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</Marquee>
</div>
</div>
);
}
export default Sample;
次に、srcディレクトリ配下にあるApp.jsを下記のように編集します。
import React from 'react';
import Sample from './sample';
import './App.css';
function App() {
const style = {
width: "50%",
margin: "0 auto",
marginTop: 150,
};
return (
<div className="App">
<div style={style}>
<Sample />
</div>
</div>
);
}
export default App;
実行します。
npm start
ブラウザから http://プライベートIP:3000にアクセスすると、文字がスクロールされていることが確認できます。
-
前の記事
docker composeで「moodle」を構築する 2021.05.07
-
次の記事
javascript Content-Typeを取得する 2021.05.07
コメントを書く