Posted at

react.jsでシンプルにMediaQueryを実現

More than 3 years have passed since last update.


react.jsのrenderをMediaQueryの条件で変えていく方法


概要

下記のライブラリをいれると簡単に実現できます。シンプル設計で素晴らしいです。

自分で書くとイベントをうけてレンダリングしたりしないといけないのでけっこう面倒です。

https://github.com/wearefractal/react-responsive


使い方

browserifyなどでrequireするだけです。

例えばMediaQueryという変数に展開すると

そちらがカスタムタグのような使い方ができます。

あとはqueryの中に条件を書いて囲むだけです。

var MediaQuery = require('react-responsive');

var React = require('react');

var Td = React.createClass({
render: function(){
if (this.props.src)
{
return (
<td key={this.props.key}>
<MediaQuery query='(max-width: 768px)'><span className="headName">{this.props.headName} </span> <Anchor key={this.props.value} text={this.props.value} src={this.props.src} /></MediaQuery>
<MediaQuery query='(min-width: 768px)'><Anchor key={this.props.value} text={this.props.value} src={this.props.src} /></MediaQuery>
</td>
)
}else{
return (
<td key={this.props.key}>
<MediaQuery query='(max-width: 768px)'> <span className="headName">{this.props.headName}</span> {this.props.value} </MediaQuery>
<MediaQuery query='(min-width: 768px)'> {this.props.value} </MediaQuery>
</td>
)
}
}
});


仕組み

すごくシンプルです。条件に合致しない場合はnoscriptで囲われて非表示になります。

<noscript data-reactid=""></noscript>


注意点

css3のMediaQueryでの条件分けとReact.jsのMediaQueryを同時に使うと

エラーになる場合があります。

同じ要素に対して条件分けをいれる場合はうまく使い分けたほうがいいですかね。