rssr-breakpoint v0.1.0

rssr-breakpoint

react view Breakpoints

ranges

unlimited: 10000000, // max end
hl: 1460,
lhl: 1330,
xl: 1200,
lxl: 1096,
lg: 992,
llg: 880,
md: 768,
lmd: 672,
sm: 576,
lsm: 443,
xs: 310,
hs: 0// start

Example

toggle

always show but with diffrent parameter value (when in range isMd is true and out of range is false).

<Breakpoint from="md" to="lg" toggle={true}>
    {
        (isMd) => (
            <div className="alert alert-info">
                {
                    isMd ? 'Now is between md and lg size' : 'Now is out of md and lg size'
                }
            </div>
        )
    }
</Breakpoint>

show in range

show Just in range

<Breakpoint from="md" to="lg" >
    {
        () => (
            <div className="alert alert-info">
                Now is between md and lg size
            </div>
        )
    }
</Breakpoint>