2018-06-19から1日間の記事一覧

スクショをベースにするスナップショットテスト

目的 CSSやJSコードをいじった後、見た目の差分を確認できます。 Reactの場合、いっぱい使われている共通のコンポーネント修正した後、既存のコンポーネントへの影響を確認することができます。 必要なパッケージ jest https://facebook.github.io/jest/ pup…

react-cropperのSafari不具合対策

react-cropperとは cropper.jsをベースとして、画像クロップツールReactコンポーネントです。 https://github.com/roadmanfong/react-cropper Safariでの不具合 class Demo extends Component { _crop(){ const dataUrl = this.refs.cropper.getCroppedCanva…

react-routerでページ遷移時アニメーション実装

概要 ページ遷移時スライドやフェードなどアニメーションを追加します。 ReactCSSTransitionGroupによってCSSアニメーション実装です。 locationの変化によってアニメーションを入れるかどうかを決めます。 実装 App.jsx const HORIZONTAL_SLIDE_TRANSITION_…

理想的なモーダル実装

概要 理想的なモーダルを実装してみました。 下記の条件を満たしました。 CSSだけでレイアウトをコントロール 内容が多いときスクロールができる 常に真ん中にある クローズボタンを配置できる 実装 index.html <html> <head> <link rel="stylesheet" type="text/css" href="./styles.css"> <meta charset="utf-8" /> <title>Ideal Modal</title> </head> <body> <button>Open Modal</button> </body></html>

React Routerにおけるルーティング定義ファイル分割方法

React Routerとは React RouterはReactによって作るSPAで使うルーティング管理ライバーリーです。 https://reacttraining.com/react-router/ 分割前 公式ドキュメントのサンプルでルーティングの定義はこんな感じです。 分割の仕方について紹介されていませ…

bodyの中のlinkタグでロードされるCSSファイルによる一瞬画面変化を避ける方法

方法 ロードする間表示用ページを用意します。 styleタグの中のコードでローディングデザインを出す。 ロードされるCSSの中でローディングデザインを隠す。 index.html <html> <head> <meta charset="utf-8" /> <style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:</style></meta></head></html>…