react-dom-utils
Inspired recompose, react-dom-utils let you work with DOMs in HOCs.
We love functional stateless components, but when it comes to findDOMNode
, we are forced to use class components. react-dom-utils
let you lift your findDOMNode
related jobs into hight-order components and write more small, reactive functional components.
You can use react-dom-utils
to
- Get
window
's width and height, and get updated whenwindow
resizes - Get
keyCode
s whendocument
or another DOM element receiveskeyDown
events - Get
pageX
andpageY
from amousemove
event
... and more.
Installation
npm install react-dom-utils --save
Example
// withMousePosition appends a mousePosition object to the base component propsconst enhance = const component = <div style= top: pageX left: pageY position: 'absolute' > Follow your mouse </div> component
More examples is here
Usage
throttle
The throttling function is for throttling DOM events. It is recommended to use raf-throttle which throttles DOM events by requestAnimationFrame
. However, you can pass in an identity function if you do not want throttling.
API
Docs are annotated using Flow type notation, given the following types:
type ReactElementType = Class<ReactComponent> | StatelessFunctionComponent | string
mapPropsOnEvent()
: ReactElementType
Attaches the props returned by propsMapper
to owner props and updates it when the specified event is triggered.
withMousePosition()
: ReactElementType
Attaches mousePosition
to owner props and updates it when a mouseover
event of the base component is triggered.
mousePosition
has the following signature:
pageX: number pageY: number clientX: number clientY: number screenX: number screenY: number
withSize()
: ReactElementType
Attaches DOMSize
to owner props and updates it when a resize
event (detected by element-resize-detector) of the base component is triggered.
DOMSize
has the following signature:
offsetWidth: number offsetHeight: number clientWidth: number clientHeight: number scrollWidth: number scrollHeight: number
withWindowSize()
: ReactElementType
Attaches windowSize
to owner props and updates it when a resize
event of window
is triggered.
windowSize
has the following signature:
innerWidth: number innerHeight: number outerWidth: number outerHeight: number
withOffsetToRoot()
: ReactElementType
Attaches offsetToRoot
to owner props and updates it when a resize
event of window
is triggered.
offsetToRoot
has the following signature:
offsetTop: number offsetLeft: number
mapPropsOnScroll()
type Scroll = x: number y: number; : ReactElementType
Attaches the props returned by propsMapper to owner props and updates it when a scroll
event of the window
is triggered.
Example:
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request