Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-dimensions
Advanced tools
Readme
React higher-order component to get the dimensions of a wrapper element and pass them as properties to the child element.
v^1.0.0 is for React v0.14 and above. Use ^0.1.0 for React v0.13
Some React components require a width to be set in pixels, and cannot be set to 100%
. This is a challenge for responsive design. This component creates a wrapper <div>
and sets the width and height to 100%
, and then passes the dimensions of this div
to your component.
Requires nodejs.
$ npm install react-dimensions
Wraps a react component and adds properties containerHeight
and
containerWidth
. Useful for responsive design. Properties update on
window resize. Note that the parent element must have either a
height or a width, or nothing will be rendered
Can be used as a higher-order component or as an ES7 class decorator (see examples)
Parameters
options
object=
options.getHeight
function= A function that is passed an element and returns element
height, where element is the wrapper div. Defaults to (element) => element.clientHeight
options.getWidth
function= A function that is passed an element and returns element
width, where element is the wrapper div. Defaults to (element) => element.clientWidth
options.containerStyle
object= A style object for the <div>
that will wrap your component.
The dimensions of this div
are what are passed as props to your component. The default style is
{ width: '100%', height: '100%', padding: 0, border: 0 }
which will cause the div
to fill its
parent in most cases. If you are using a flexbox layout you will want to change this default style.options.className
string= Control the class name set on the wrapper <div>
options.elementResize
boolean= Set true to watch the wrapper div
for changes in
size which are not a result of window resizing - e.g. changes to the flexbox and other layout. (optional, default false
)Examples
// ES2015
import React from 'react'
import Dimensions from 'react-dimensions'
class MyComponent extends React.Component {
render() (
<div
containerWidth={this.props.containerWidth}
containerHeight={this.props.containerHeight}
>
</div>
)
}
export default Dimensions()(MyComponent) // Enhanced component
// ES5
var React = require('react')
var Dimensions = require('react-dimensions')
var MyComponent = React.createClass({
render: function() {(
<div
containerWidth={this.props.containerWidth}
containerHeight={this.props.containerHeight}
>
</div>
)}
}
module.exports = Dimensions()(MyComponent) // Enhanced component
Returns function A higher-order component that can be
used to enhance a react component Dimensions()(MyComponent)
Returns the underlying wrapped component instance. Useful if you need to access a method or property of the component passed to react-dimensions. Does not currently work for stateless function components see #30
Returns object The wrapped React component instance
Will open a browser window for localhost:9966
npm i && npm i react react-dom && npm start
$ npm test
FAQs
React [higher-order component](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775) to get dimensions of container
The npm package react-dimensions receives a total of 13,461 weekly downloads. As such, react-dimensions popularity was classified as popular.
We found that react-dimensions demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.