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.
@render-props/rect
Advanced tools
Readme
A state container which provides an interface for retrieving the bounding
client rect of a referenced element. The bounding client rect will update
each time the window resizes - a behavior which can be turned off by setting
the prop recalcOnWindowResize
to false
. It doesn't provide values for x
and
y
, as IE, Edge and Safari don't have them as part of their DOMRect
.
yarn add @render-props/rect
or npm i @render-props/rect
import Rect from '@render-props/rect'
function DivWithRect (props) {
return (
<Rect>
({rectRef, recalcRect, top, right, bottom, left, width, height}) => (
<div ref={rectRef}>
<div>
My width: {width}
</div>
<div>
My height: {height}
</div>
<div>
My position: {JSON.stringify({top, right, bottom, left})}
</div>
</div>
)
</Rect>
)
}
recalcOnWindowResize {bool}
: if true
, this component will update itself
each time a window resize event is detected. Defaults to true
.withCoords {bool}
: if true
, this component will provide its child function
with unpacked arguments for its bounding client rect, i.e.
{top, right, bottom, left, width, height}
. If false
, it will provide a
function getRect
instead which will return the same object just mentioned.
Defaults to true
.rectRef
(element
)
ref
must be provided to whatever element you are trying to receive the
bounding client rect for. e.g. <div ref={rectRef}>
recalcRect
rectRef
getRect
withCoords
is set to false
. Returns the bounding client
rect object.Note: these are only provided if withCoords
is true
.
top {number}
: the top coordinate value of the DOMRect
right {number}
: the right coordinate value of the DOMRect
bottom {number}
: the bottom coordinate value of the DOMRect
left {number}
: the left coordinate value of the DOMRect
width {number}
: the width of the DOMRect
height {number}
: the height of the DOMRect
FAQs
A state container which provides an interface for retrieving the bounding client rect of a referenced element. The bounding client rect will update each time the window resizes - a behavior which can be turned off by setting the prop `recalcOnWindowResize
The npm package @render-props/rect receives a total of 169 weekly downloads. As such, @render-props/rect popularity was classified as not popular.
We found that @render-props/rect demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.