react-responsive-render
React on window or element resize.
npm i react-responsive-render
- TypeScript support
Components:
- Responsive
- ResponsiveItems
- SpaceAround
Usage
;
Handle window resize:
<Responsive> <div> Window: width x height </div> </Responsive>
Handle element size & position:
<Responsive toElement resizeTimeout=500 trackPosition> <textarea value=`Textarea: x Screen: [ , ]` readOnly /> </Responsive>
Use callback instead of render function:
<Responsive toElement onChange=callback> <Smth /></Responsive>
Handle overflow:
<ResponsiveItems items=buttons minItemWidth=80> <ButtonGroup> children restItemslength ? <DropDownButton label="..." children=restItems /> : null </ButtonGroup> </ResponsiveItems>
Handle space around (eg for dropdown or tooltip):
<SpaceAround calcStyle item= <span className="tooltip" style=style> This is tooltip for MyButton! status </span> > <button children="MyButton" /></SpaceAround>
Responsive
props
toElement
- Observe element's size (false
by default).resizeTimeout
- Timeout before update (63
by default).children
- Node or render function.onChange({ width, height, left?, top? })
- Callback for any changes.left
,top
is position fromprops.trackPosition
option.trackPosition
- Track position (scroll for window mode / screen position for toElement mode).fast
-true
by default. Iffalse
, usegetComputedStyle
to get element's size.immediate
-false
by default. Update sizes and invokeonChange
immediate after didMount.
ResponsiveItems
props
resizeTimeout
- Timeout before update (63
by default).items
- Array of items.children
- Render functionchildren({ children, restItems })
.minItemWidth
- Min required width per item (in pixels).immediate
-false
by default. Update sizes and invokeonChange
immediate after didMount.
Handle vertical overflow:
rows=true
- Flag.minItemHeight
- Min required height per item (in pixels).
SpaceAround
props
container
- Wrapper (span
by default).children
- Any children. Will be used as base element.timeout
- Timeout in ms before update (500
by default).calcStyle
- Calculate styles forprops.item
.item(status: SpaceAroundStatus, style?)
- Movable element renderer.immediate
-false
by default. Update sizes and invokeonChange
immediate after didMount.
SpaceAroundStatus
is one of:
- Top
- Bottom
- LeftTop
- LeftBottom
TODO
- Storybook Waiting for bugfix in release
- Documentation