コンポーネントのサイズを取得する
コンポーネントのサイズを取得するには、SizeMeコンポーネントのrenderプロパティを使って, サイズを取得したいコンポーネントをレンダリングします。 サイズ情報はrenderの引数で渡されます。 後述する各種オプションは、SizeMeコンポーネントのプロパティを経由して設定します。
<SizeMe
monitorHeight
refreshRate={32}
render={({ size }) => <div>My width is {size.width}px</div>}
/>
HOCのサイズを取得する
HOCのサイズを取得するには、withSizeにサイズを取得したいコンポーネントを渡すことでサイズが取得できます。 サイズ情報は、sizeプロパティとして渡されます。 後述する各種オプションは、withSizeの引数を経由して設定します。
import sizeMe from 'react-sizeme'
class MyComponent extends Component {
render() {
const { width, height } = this.props.size
return (
<div>
My size is {width || -1}px x {height || -1}px
</div>
)
}
}
export default sizeMe({ monitorHeight: true })(MyComponent)
react-sizemeの設定値
react-sizemeの挙動を変更する設定値を紹介します。
- SizeMeコンポーネントで使うときは、プロパティとして設定します。
- withSizeで使うときは、引数として渡して設定します。
monitorWidth
幅を取得するかどうかを設定します。
- true: 幅が計測されprops.sizeに含まれ、widthに幅のpx値が設定されます。
- false: 幅が計測されprops.sizeに含まれず、widthにnullが設定されます。 デフォルトはtrueになっています。
monitorHeight
高さを取得するかどうかを設定します。
- true: 高さが計測されprops.sizeに含まれ、heightに高さのpx値が設定されます。
- false: 高さが計測されprops.sizeに含まれず、heightにnullが設定されます。 デフォルトはfalseになっています。
refreshRate
サイズの変更が検出された時に、サイズ再計算の最大頻度をミリ秒単位で指定します。 最小値は16ミリ秒です。 デフォルトは16ミリ秒です。
refreshMode
リフレッシュを行うモードを指定します。
- throttle: refreshRateを守りながら、頻繁に計測をおこないます。
- debounce: 最小リフレッシュレートを守りながら、計測をおこないます。 デフォルトはthrottleモードです。
noPlaceholder
プレースホルダコンポーネントをレンダリングするかどうかを設定します。
- true: プレースホルダコンポーネントをレンダリングしません。
- false プレースホルダコンポーネントをレンダリングします。